canvas绘制海报及二维码

最新推荐文章于 2024-06-28 17:37:52 发布

QQ577834214

最新推荐文章于 2024-06-28 17:37:52 发布

阅读量570

点赞数

分类专栏：解决方案文章标签： vue 前端 javascript

本文链接：https://blog.csdn.net/QQ577834214/article/details/121556589

版权

这篇博客介绍如何在JavaScript环境中，特别是结合Vue.js，利用canvas元素进行海报设计和生成二维码的操作。通过DrawImage组件，开发者可以实现自定义的图形绘制和动态内容整合到海报中，提供丰富的前端交互体验。

摘要由CSDN通过智能技术生成

/**
 * 封装成一个类
 * @param url
 * @returns
 */
 class DrawImage {
/**
 * 获取Image 对象
 * @param url
 * @returns 返回URL 链接
 */
getImg(url: string) {
    return new Promise((res: any) => {
        //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
        const Img = new Image();
        Img.src = url;
        Img.crossOrigin = "*"; // 支持跨域图片
        Img.onload = function() {
            res(Img);
        };
    });
}

/**
 * 绘制图片
 * @param img 底图
 * @param img2 二维码图
 * @param left 左间距
 * @param right 右间距
 * @returns
 */
drawBase64Image(
    img: any,
    img2: any,
    left: number,
    top: number,
    size: number
) {
    return new Promise((res: any) => {
        const canvas = document.createElement("canvas"), //创建canvas元素
            width = img.width, //确保canvas的尺寸和图片一样
            height = img.height;
        canva