html5 - canvas 跨域问题
伊谢尔伦
伊谢尔伦 2017-04-17 15:05:42
[HTML讨论组]

在微信上给用户修改头像的时候,用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';
    }
伊谢尔伦
伊谢尔伦

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

全部回复(2)
高洛峰

初步看了下代码貌似没什么问题的,排除掉图片可能存在的跨域问题,还有一个问题楼主可以查看下就是getImageData 的传参,需要是number类型,楼主可以先使用

console.log(typeof x, typeof y, typeof width, typeof height)

来看看

怪我咯

应该不是跨域吧,跨域会写 The canvas has been tainted by cross-origin data

console.log一下getImageData的参数吧。The provided double value is non-finite有可能是吧string当数传进来了。

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

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