Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
603 views
in Technique[技术] by (71.8m points)

file上传的图片,生成到canvas,toDataUrl后在苹果微信上保存下来,是黑色的。

我用input file上传图片后,加到canvas里,然后toDataUrl,把地址添加到img上显示,是可以得。但我在苹果微信上,长按保存到本地后,却是黑色的,只有在苹果微信上发现到这问题。。。。安卓微信上没事。

function cacheImg(url , callback){
    var img = new Image()
    img.setAttribute('crossOrigin', 'Anonymous');
    img.src = url;
    
    if ( img.complete) {
            console.log('complete')
        callback.call(img)
        return;
    }
    img.onload = function() {
        console.log('load')
      callback.call(img)
    }
}
    var oCan = document.getElementById('canvas'),
        gct = oCan.getContext('2d');
        oCan.style.display = 'block';
        oCan.width = 640;
        oCan.height = 916;
        //有两张图片
        var fileUrl = obj.$showImg.attr('src'),
            txtUrl = obj.$txtBg.find('img').attr('src')
        gct.clearRect(0, 0, 640, 916);
        //cacheImg,当图片load后,执行回调函数
        cacheImg(fileUrl,function(){
            //生成上传的图片
            gct.drawImage(this , 0 , 0, oCan.width, oCan.height);
            //制造滤镜效果
            var imageData = gct.getImageData(0, 0, canvas.width, canvas.height),

            filtered = ImageFilters.ColorTransformFilter(imageData,1.4,1.5,.5,0,0,0);
            gct.putImageData(filtered, 0, 0);
        cacheImg(txtUrl,
            function(){
                console.log(this)
                //生成txtbg图片
                gct.drawImage(this , 0 , 0);
                //两张图片加载完,生成到canvas后
                //输出画布,生成图片
                var outputImg = oCan.toDataURL("image/png"); 
                //最后就添加到img上,然后是可以看到效果的
                $(img).attr('src',outpuImg')
                
            })

上传的图片是跨域的,用toDataUrl生成的含有跨域图片,在苹果微信上不能保存??有哪位大大知道。。。急


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

最后发现是滤镜插件,改变了图片的数据之类,导致有几种滤镜效果最后是生成不了图片。。。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...