html5 - canvas 跨域问题
问题描述
在微信上给用户修改头像的时候,用canvas来截图。结果报错:Owechat_login.js:226 Uncaught TypeError: Failed to execute ’getImageData’ on ’CanvasRenderingContext2D’: The provided double value is non-finite.代码:function cropImage(targetCanvas, x, y, width, height) {
var targetctx = targetCanvas.getContext(’2d’);var targetctxImageData = targetctx.getImageData(x, y, width, height); // sx, sy, sWidth, sHeight var c = document.createElement(’canvas’);var ctx = c.getContext(’2d’); c.width = width;c.height = height; ctx.rect(0, 0, width, height);ctx.fillStyle = ’white’;ctx.fill();ctx.putImageData(targetctxImageData, 0, 0); // imageData, dx, dy document.getElementById(’image’).src = c.toDataURL(’image/jpeg’, 0.92);document.getElementById(’image’).style.display = ’initial’; }
问题解答
回答1:初步看了下代码貌似没什么问题的,排除掉图片可能存在的跨域问题,还有一个问题楼主可以查看下就是getImageData 的传参,需要是number类型,楼主可以先使用
console.log(typeof x, typeof y, typeof width, typeof height)
来看看
回答2:应该不是跨域吧,跨域会写 The canvas has been tainted by cross-origin data
console.log一下getImageData的参数吧。The provided double value is non-finite有可能是吧string当数传进来了。
相关文章:
1. macos - mac下docker如何设置代理2. javascript - 学习网页开发,关于head区域一段脚本的疑惑3. javascript - JS设置Video视频对象的currentTime时出现了问题,IE,Edge,火狐,都可以设置,反而chrom却...4. angular.js - ng-grid 和tabset一起用时,grid width默认特别小5. javascript - 如何获取未来元素的父元素在页面中所有相同元素中是第几个?6. Android下,rxJava+retrofit 并发上传文件和串行上传文件的效率为什么差不多?7. 热切期待朱老师的回复,网页视频在线播放器插件配置错误8. mysql - AttributeError: ’module’ object has no attribute ’MatchType’9. javascript - 从mysql获取json数据,前端怎么处理转换解析json类型10. Whitelabel错误页面发生意外错误(类型=未找到,状态= 404)/WEB-INF/views/home.jsp
