Canvas跨域的解决方案介绍

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 画布上即可。

1

2

3

4

5

6

7

8

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的this的用法详解

html怎样格式化输出json数据

如何解决canvas绘图时遇到的跨域问题

javascript怎么将对象转成字符串

javascript中对象的介绍（附代码）

浏览器内核以及浏览器兼容的问题分析

javascript怎么判断值是否是整数

javascript如何获取id属性

javascript中“===”的用法是什么

h5的组织内容如何使用

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




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...