javascript - file上传的图片,生成到canvas,toDataUrl后在苹果微信上保存下来,是黑色的。
伊谢尔伦
伊谢尔伦 2017-04-11 12:30:01
[JavaScript讨论组]

我用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生成的含有跨域图片,在苹果微信上不能保存??有哪位大大知道。。。急

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(2)
阿神

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

PHP中文网

你看看是不是Canvas跨域的问题

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号