在使用javascript库处理图像大小时获取上下文的问题

Problems getting context while using a javascript library to handle image sizing

本文关键字：获取 小时 上下文 问题 图像 javascript 处理      更新时间：2023-09-26

我在这里使用了一个很好的库来处理通过iphone相机传入的一些大图像，以避免这里的整个子采样戏剧。

我的绘制代码:

function imageLoaded(img, frontCamera) {
    element = document.getElementById("canvas1");
    var mpImg= new MegaPixImage(img);
    // read the width and height of the canvas- scaled down
    width = element.width; //188  94x2
    height = element.height; //125
    //used for side by side comparison of images
    w2 = width / 2;
    // stamp the image on the left of the canvas
    if (frontCamera) {
        mpImg.render(element, {maxWidth:94, maxHeight:125});} else{
        mpImg.render(element, {maxWidth:94, maxHeight:125});}
    //at this point, i want to grab the imageData drawn to the canvas using 
    //MegaPixImage and continue to do some more image processing, which normally
    //would happen by declaring ctx=element.getContext("2d"); 
//more stuff here
}

图像绘制得很好，…但我似乎找不到一种方法，然后对那个图像进行图像处理。在画布上绘制图像后，我如何获得新的上下文?

也许我必须从库中运行进一步的图像处理，这样我就可以访问上下文，或者从库中剥离上下文绘图。

谢谢你的帮助!

我有一个类似的问题，实际上发现了一个有用的函数来检测子抽样，并且只在发现子抽样时使用MegaPixImage。

在我的情况下，对于本地文件读取(iPhone相机，在你的情况下)，我调用handleFileSelect函数时，<input type="file">值被改变(即，当一个文件被选择填充这个输入)。在这个函数中，我调用了一个通用的populateImage JS函数，它将图像数据绘制到画布上。

以下是handleFileSelect函数和input的绑定: 
$("#my_file_input").bind('change', function (event) {
    handleFileSelect(event);
});
function handleFileSelect(event) {
    var reader,
        tmp,
        file = event.target.files[0];
    try {
        reader = new FileReader();
        reader.onload = function (e) {
            tmp = e.target.result.toString();
            // In my case, some image data (from Androids, mostly) didn't contain necessary image data, so I added it in
            if (tmp.search("image/jpeg") === -1 && tmp.search("data:base64") !== -1) {
                tmp = tmp.replace("data:", "data:image/jpeg;");
            }
            populateImage(tmp);
        };
        reader.onerror = function (err) {
            // Handle error as you need
        };
        reader.readAsDataURL(file);
    } catch (error) {
        // Handle error as you need
    }
}
然后，我的populateImage函数(在上面的reader.onload函数中调用): 
function populateImage(imageURL) {
    var tmpImage = new Image();
    $(tmpImage).load(function () {
        var mpImg, mpImgData;
        // If subsampling found, render using MegaPixImage fix, grab image data, and re-populate so we can use non-subsampled image.
        // Note: imageCanvas is my canvas element.
        if (detectSubsampling(this)) {
            mpImg = new MegaPixImage(this);
            mpImg.render(imageCanvas, {maxWidth: 94, maxHeight: 125});
            mpImgData = imageCanvas.toDataURL("image/jpg");
            populateImage(mpImgData);
            return;
        }
        // Insert regular code to draw image to the canvas
        // Note: ctx is my canvas element's context
        ctx.drawImage(tmpImage, 0, 0, 94, 125); // Or whatever x/y/width/height values you need
    });
    $(tmpImage).error(function (event) {
        // Handle error as you need
    });
    tmpImage.src = imageURL;
}

最后但并非最不重要的是detectSubsampling函数。请注意，这个方法是从另一个来源找到的，而不是我自己的。

function detectSubsampling(img) {
    var iw = img.naturalWidth,
        ih = img.naturalHeight,
        ssCanvas,
        ssCTX;
    if (iw * ih > 1024 * 1024) { // Subsampling may happen over megapixel image
        ssCanvas = document.createElement('canvas');
        ssCanvas.width = ssCanvas.height = 1;
        ssCTX = ssCanvas.getContext('2d');
        ssCTX.drawImage(img, -iw + 1, 0);
        // Subsampled image becomes half smaller in rendering size.
        // Check alpha channel value to confirm image is covering edge pixel or not.
        // If alpha value is 0 image is not covering, hence subsampled.
        return ssCTX.getImageData(0, 0, 1, 1).data[3] === 0;
    }
    return false;
}

这可能比你预想的要多，但就像我说的，我遇到了一个类似的问题，这个解决方案被证明可以在所有支持canvas的浏览器/设备上工作。

希望有帮助!

相关文章：