Canvas跨域的解决方案介绍-木庄网络博客

Canvas跨域的解决方案介绍

2022-03-29 10:01:14 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于Canvas跨域的解决方案介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Canvas 跨域如何解决？这里记录下使用 Canvas 绘图过程中所遇到的跨域问题和解决方案。

先来看下实现方法。

实现方法

目标图片一般是由图片 + 文本构成。无论是千奇百怪的大小图片，还是变幻莫测的各式文本，都能用 canvas api drawImage 和 fillText 方法来完成。

基本流程如下:

获取 canvas 上下文 -- ctx

1 2	`const` `canvas = document.querySelector(selector)` `const` `ctx = canvas.getContext('2d')`

绘图

忽略图片上的内容，直接用 drawImage 将其画到 canvas 画布上即可。

const image = new Image()
image.src = src
image.onload = () => {
    ctx.save()
    // 这里我们采用以下参数调用
    this.ctx.drawImage(image, dx, dy, dWidth, dHeight)
    this.ctx.restore()
}

drawImage 有3种参数使用方式，具体用法可以查看 MDN 文档。

获取图像数据

相关阅读 >>

javascript如何获取修改value

深入浅析 promise 比 settimeout() 快的原因

如何使用HTML5实现地理位置的获取

HTML5上传图片移动端、pc端的通用代码分享

更多相关阅读请进入《HTML5》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » Canvas跨域的解决方案介绍

Canvas跨域的解决方案介绍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论