html5 - canvas 跨域問題
問題描述
在微信上給用戶修改頭像的時候,用canvas來截圖。結(jié)果報錯: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:應(yīng)該不是跨域吧,跨域會寫 The canvas has been tainted by cross-origin data
console.log一下getImageData的參數(shù)吧。The provided double value is non-finite有可能是吧string當(dāng)數(shù)傳進(jìn)來了。
相關(guān)文章:
1. android - 用textview顯示html時如何寫imagegetter獲取網(wǎng)絡(luò)圖片2. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能3. showpassword里的this 是什么意思?代表哪個元素4. javascript - windows下如何使用babel,遇到了困惑5. JavaScript事件6. python - 為什么正常輸出中文沒有亂碼,zip函數(shù)之后出現(xiàn)中文編程unicode編碼的問題,我是遍歷輸出的啊。7. javascript - js中向下取整8. android - rxjava多線程并發(fā)怎么控制順序9. 對mysql某個字段監(jiān)控的功能10. html - vue項目中用到了elementUI問題
