怎样解决canvas画图时碰到的跨域题目-

这篇文章主要介绍了详解canvas画图时碰到的跨域题目的相干材料,内容挺不错的，此刻分享给大家，也给大家做个参照 。 这篇文章主要介绍了详解canvas画图时碰到的跨域题目的相干材料,内容挺不错的，此刻分享给大家，也给大家做个参照 。

当在canvas中绘制一张外链图片时，我们会碰到一个跨域题目。

示例如下：

    
    


    
    
    《script》
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            document.getElementById('image').src = canvas.toDataURL('image/png');
        };
        image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
    《script》

当在阅读器中打开这个页面时，你会发明这个题目：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

这是挨限于 CORS 战略，会存在跨域题目，虽然可以运用图像，但是绘制到画布上会污染画布，一旦一个画布被污染,就没法提取画布的数据，比方没法运用运用画布toBlob(),toDataURL(),或getImageData()办法；当运用这些办法的时候 会抛出上面的平安差错

这是一个苦恼的题目，但荣幸的是img新增了crossorigin属性，这个属性决议了图片猎取历程中可否开启CORS功能：

    
    


    
    
    《script》
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        image.setAttribute('crossorigin', 'anonymous');
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            document.getElementById('image').src = canvas.toDataURL('image/png');
        };
        image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
    《script》

对照上面两段JS代码，你会发明多了这一行：

image.setAttribute('crossorigin', 'anonymous');

就是这么简略，完善的解决了!

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！