img和canvas的相互转换

最新推荐文章于 2024-02-01 14:23:11 发布

vcxiaohan2

最新推荐文章于 2024-02-01 14:23:11 发布

阅读量7.9k

点赞数 1

分类专栏： canvas

本文链接：https://blog.csdn.net/u011500781/article/details/52073498

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

canvas.toDataURL()跨域问题的解决

HTMLCanvasElement.toDataURL()

<img >加上crossOrigin="anonymous"之后导致图片无法显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>demo</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <canvas width="400" height="300"></canvas>
    <img>
</body>
<script>
    $(function () {
        var cav = $('canvas')[0],
            ctx = cav.getContext('2d')

        var img = new Image()
        // 允许跨域，后端需要在响应头添加'Access-Control-Allow-Origin: *'(cors解决跨域)
        img.crossOrigin = '*'
        img.onload = function () {
            // img转换为canvas
            ctx.drawImage(img, 0, 0)
            ctx.fillRect(0, 0, 50, 50)
            try {
                // 读取图片base64 [不传会默认读取为image/png格式，不可压缩] [如果把png图片读取为image/jpeg，那么透明区域会变黑，可大幅度压缩质量] [如果读取为image/webp格式，只有谷歌支持读取和显示这种格式]
                var base64 = cav.toDataURL()
                console.log(base64)
                // canvas 转换为 img
                $('img')[0].src = base64
            } catch (err) {
                // 报错'Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.'表示图片需同源
                console.warn('图片需同源')
            }
        }
        // src最后赋值，为了兼容ie8
        img.src = 'http://oeaqy69vv.bkt.clouddn.com/1.jpg'
    })
</script>

</html>

vcxiaohan2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
img和canvas的相互转换

canvas.toDataURL()跨域问题的解决：http://www.cnblogs.com/ajg016/p/5477557.html video body, html { width: 100%; height: 100%;
复制链接

扫一扫