据说某种情况下iphone会出现canvas图片跨域问题，而且是跟os的版本有关
让人特别抓狂
以下方案为：
网络图片url->blog->fileReader->img.src->ctx.drawImage
本质上是将跨域的问题交由ajax处理，然后就是格式转换
具体细节请各位看官参考源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="axios.min.js"></script>
</head>
<body>
<img id="img" alt="">
<canvas id="canvas" width="300" height="300" style="background-color: cornflowerblue;"></canvas>
<script>
getBase64("https://laravel.gign.xyz/cxk.jpg")
function getBase64(imgUrl) {
window.URL = window.URL || window.webkitURL
var xhr = new XMLHttpRequest()
xhr.open("get", imgUrl, true)
// 必须将返回类型设置为blob
xhr.responseType = "blob"
xhr.onload = function () {
if (this.status == 200) {
// 得到一个blob对象
let blob = this.response;
console.log(blob)
let file_reader = new FileReader()
file_reader.readAsDataURL(blob);
file_reader.onloadend = function (e) {
console.log(file_reader.result)
img.src = file_reader.result
img.onload = function() {
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
}
}
}
}
xhr.send()
}
</script>
</body>
</html>
其它方案：
url->blog->window.URL.createObjectURL->img.src->ctx.drawImage
blog到图片的那一步变了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="axios.min.js"></script>
</head>
<body>
<img id="img" alt="">
<canvas id="canvas" width="300" height="300"></canvas>
<script>
getBase64("https://laravel.gign.xyz/cxk.jpg")
function getBase64(imgUrl) {
window.URL = window.URL || window.webkitURL
var xhr = new XMLHttpRequest()
xhr.open("get", imgUrl, true)
// 必须将返回类型设置为blob
xhr.responseType = "blob"
xhr.onload = function () {
if (this.status == 200) {
img.onload = () => {
window.URL.revokeObjectURL(img.src)
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
}
img.src = window.URL.createObjectURL(this.response)
}
}
xhr.send()
}
</script>
</body>
</html>
网友评论