<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>