IOS（WKWebview） 5+app 图片裁剪时，遇到canvas.toDataURL就报错

分类：HBuilderX

WKWebview iOS

IOS（WKWebview） 5+app 图片裁剪时，遇到canvas.toDataURL就报错。

使用组件Cropper.js裁剪图片时，要把原图裁剪的部分转化成图片就必须使用canvas.toDataURL，但是ios的WKWebview模式下回报错；
前置必要条件：
1、首先ios的app还是必须设置为WKWebview这个模式(苹果审核相关);
2、使用canvas.toDataURL方法把原图剪裁的部分转化成base64;（就这个部分出错）

已经详细阅读https://ask.dcloud.net.cn/article/36348这个关于canvas跨域的说明，都是关于对uni-app的支持，5+APP如何解决？

2020-02-21 20:09 负责人:无分享

10 个回复

DCloud_UNI_GSQ

并非bug，这是跨域

和浏览器里同样的处理方式：给图像添加响应头允许跨域访问
使用5+API下载图像到本地加载

守护 (作者)

谢谢回复。

实际上我只需要在原图上截取的那个部分图片的base64字符串，一般使用canvas.toDataURL这个会得到；我不需要下载图像到本地；

关键的问题是如何从原图得到要截取的那部分的base64对于的字符串？

2020-02-25 18:20
DCloud_UNI_GSQ

回复守护: 之前说的那个插件，你看下里面的代码

2020-02-25 18:22
守护 (作者)

回复 DCloud_UNI_GSQ: 看了，那个需要一个图片文件的路径，我这个没有路径，因为是原图中的部分区域，不是路径

2020-02-25 18:24
7***@qq.com

回复 DCloud_UNI_GSQ: 同有这个问题,那个插件无法满足现在的场景,不是对本地图片进行base64转换,而是使用cropper.js对本地图片进行裁剪,得到了canvas,现在的问题是,这个由原图片裁剪后得到的canvas,怎么能生成base64

2020-03-14 22:55

l***@163.com - leiming

联系qq:240973924
我也遇到同样问题，canvas.toDataURL("image/jpeg") 失败，想问一下
canvas渲染，我都是加载的本地图片（logoImage都是工程里图片），

    ctx.drawImage(logoImage, img.width - 760, img.height - 280, 660, 192);  
                ctx.drawImage(avatarImage, img.width - 740, img.height - 420, 140, 140);  
                ctx.fillText(app.getUser().crmUserName, img.width - 600, img.height - 300 ); //选择位置  
                ctx.drawImage(weatherImage, 250, 600, 160, 160);

怎么才能canvas.toDataURL("image/jpeg")成功


var imgdata = null;  
                    try{  
                        imgdata = canvas.toDataURL("image/jpeg");//这里会报错  
                    }catch(e){  
                                               //报错了  
                        console.log(e);  
                        m.alert(e);  
                    }  
                    var filename = ''   new Date().getTime()   '-'   Math.floor(Math.random()*100000 1)   '.jpg';  
                    var bitmap = new plus.nativeObj.Bitmap("watermark");  
                    bitmap.loadBase64Data(imgdata, function() {  
                        console.log("加载Base64图片数据成功");  
                        waiting.close();  
                        // 将webview内容绘制到Bitmap对象中  
                        bitmap.save("_doc/camera/"   filename, {  
                            overwrite: true,  
                            //format: 'jpg',  
                            quality: 75  
                        }, function(info) {  
                            plus.nativeUI.toast("相片已保存成功");  
                            bitmap.clear();  
                            void plus.gallery.save("_doc/camera/"   filename, function() {}, function() {});  
                            console.log('保存图片成功：'   JSON.stringify(info));  
                        }, function(e) {  
                            plus.nativeUI.toast("相片保存失败");  
                            bitmap.clear();  
                            console.log('保存图片失败：'   JSON.stringify(e));  
                        });  
                    }, function(e) {  
                        bitmap.clear();  
                        waiting.close();  
                        alert('加载Base64图片数据失败：'   JSON.stringify(e));  
                    });  
                }, 1000);