Question

我正在使用http://deepliquid.com/content/Jcrop.html中的裁剪插件来选择图像区域。使用常见的URL src图像时，裁剪预览可以正常工作。当src是base 64字符串时，它不会。谷歌搜索可能的原因，但没有运气。代码如下所示：

function updatePreview(c) 
{
    if(parseInt(c.w) > 0) 
    {
        var img = new Image,
        src = $('.jcrop-holder img').attr('src'),
        cvs = document.getElementById('preview'),
        ctx = cvs.getContext('2d');
        img.crossOrigin = "Anonymous";
        img.onload = function() 
        {
            console.log('Onload event fired!');
            var ctx = cvs.getContext("2d");
            ctx.drawImage(img, c.x, c.y, c.w, c.h, 0, 0, cvs.width, cvs.height);    
            var dataURL = cvs.toDataURL();
            new_image = dataURL;    
        }
        img.src = src;
        if ( img.complete || img.complete === undefined ) 
        {
            console.log('Undefined!');
            img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
            img.src = src;
        }

    }
};

此外，当我开始拖动区域选择器时，使用code64图像会遇到一定的延迟。

Answer 1

我的基础64来自另一个画布，我在这里找到：Display canvas image from one canvas to another canvas using base64最好的选择是使用原始画布作为drawimage（）的源。问题仍然是性能，但我会写另一个更具体的问题。

从基础64图像中绘制画布作为源

1 个答案: