0

我在这里使用了一个很好的库来处理通过 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
}

图像画得很好，......但我似乎找不到随后对该图像进行图像处理的方法。在画布上绘制该图像后，我将如何获得新的上下文？

也许我要么必须从该库中运行进一步的图像处理，以便我具有上下文访问权限，要么将上下文绘图从库中剥离出来。

谢谢您的帮助！

4

1 回答 1

0

我有一个类似的问题，实际上发现了一个有用的功能来检测子采样并且仅MegaPixImage在找到子采样时使用。

就我而言，对于本地文件读取（在您的情况下，iPhone摄像头），handleFileSelect当更改值时，我调用一个函数<input type="file">（即选择文件以填充此输入时）。在这个函数内部，我调用了一个通用的populateImageJS 函数，将图像数据绘制到画布上。

这是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;
}

这可能超出了您的预期，但就像我说的，我遇到了类似的问题，并且该解决方案被证明适用于所有支持画布的浏览器/设备。

希望能帮助到你！

于 2013-05-10T20:01:03.507 回答