canvas与image互转及图片下载

最新推荐文章于 2024-06-05 17:30:37 发布
最新推荐文章于 2024-06-05 17:30:37 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITchen0521/article/details/84634253
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <meta name="keywords" content="img">
</head>
<body>
    
    <script>
        canvasConfig = {
            id:'test',
            width:'200',
            height:'200',
            bgColor:'pink'

        }

        class method {
            //canvas转图片
            canvasToImage (canvas) {
                let image = new Image();
                image.src = canvas.toDataURL('image/png');

                return image;

            }

            //图片转canvas
            imageToCanvas (image) {
                let canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                canvas.getContext('2d').drawImage(image, 0, 0)
            }

            //图片下载
            imageDownLoad (image) {
                let aLink = document.createElement('a');
                aLink.href = image.src;
                aLink.download = 'test.png';
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink)
            }


        }

        Object.assign(method.prototype,{
            test (content) {
                console.log(content);
            }
        })

        var canvasMethod = new method();
        

        var canvasDom = document.createElement('canvas');
        
        canvasDom.id = canvasConfig.id;
        canvasDom.width = canvasConfig.width;
        canvasDom.height = canvasConfig.height;
        canvasDom.style.background = canvasConfig.bgColor;
        document.body.appendChild(canvasDom);

        var ctx = canvasDom.getContext("2d");

        ctx.fillStyle='red';
        ctx.fillRect(50,50,100,100);

        canvasMethod.test('success');
        var getImg = canvasMethod.canvasToImage(canvasDom);
        document.body.appendChild(getImg);


        canvasMethod.imageDownLoad(getImg)

    </script>
</body>
</html>

ITchen0521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas转成为图片并下载为本地图片文件
lit_finger的博客
01-13 4650
本次需求为echarts图表，点击下载按钮后可获得当前视图的png图片 echarts官方API里有个方法，可将chart转换为base64格式的url 这里我本地使用canvas模拟，和echarts时一个道理，html代码如下
canvas和image互相转换
ShiYadong的专栏
06-09 8035
        现在扫描二维码已经很普遍，微信扫一扫即可，但是如果二维码是在自己的手机上呢？那就要用到微信里的一个功能了，手指长按二维码，会弹出自动识别的选项，点确定就可以看到二维码的内容了。那么怎么通过前端实现这个长按自动识别这个功能呢？        首先我们需要知道利用jquery的二维码生成插件jquery.qrcode.min.js，制作的二维码是在canvas元素中的。而微信中我们点击...
canvas绘制图像image
zhiqingxue的博客
05-11 2906
canvas绘制图像image 1.image的三个script的基本语法 准备工作:1.定义画布长度，获取2D绘图环境 ​ 2.建立对面对象，设置图片路径 ​ 3.载入图片，开始绘制 a.简单的画布上根据坐标绘制 ctx.drawImage(img,x,y) img为要绘制的图像，x，y分别为绘制位置的横纵坐标 b.同时定义坐标和图片大小 ctx.drawImage(img,x,y,widt...
前端逆向之下载canvas引用的图片
最新发布
meis27461的博客
06-05 540
那么可能性就太多了，而且肯定是故意隐藏的，这时候你可以看一下是否是socket返回的二进制引用的图片。那么图片大概率是base64的图片，可以直接去源码里搜索base64这个字符串来检索所需要的图片。当我们用dom检查器的时候无法选中想要扒下来的图片，只能选中canvas，这种时候该怎么办呢？那么图片大概率是以接口的方式返回的，可以去查看一下Fetch/XHR里有没有类似的接口。恭喜你啊，挣不了几毛钱，居然还要解决这么坑爹的问题。或者是图片以base64静态的方式存在某个js里。
canvas图片旋转，图片base64编码，保存图片
芝芝为荔枝
06-04 3590
canvas图片旋转，图片base64编码，保存图片
canvas生成图片并下载
web修理工
10-30 741
【代码】canvas生成图片并下载。
Canvas与Image互相转换示例代码
09-28
// 创建一个新的Canvas元素，并设置其宽度和高度与图片相同 var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; // 获取Canvas的2D渲染上下文 var ...
js 利用canvas转换图片格式并下载图片
01-08
思路很简单，就是在canvas上drawImage，然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { //image一定是一个图片对象，不然获取不到宽高 var canvas = document.createElement(canvas); /...
canvas实现图片镜像翻转的2种方式
01-19
var img = new Image(); //这个就是 img标签的dom对象 img.src = './sy.png'; img.onload = function () { //图片加载完成后，执行此方法 ctx.drawImage(img, posx, posy, 210, 80); }; play....
html2image网页转图片并下载，兼容ie
01-15
下面将详细介绍这个工具的核心概念、工作原理以及如何实现“网页转图片”并下载到本地，特别关注在IE浏览器中的兼容性问题。 1. **核心概念**： - HTML：超文本标记语言，用于构建和展示网页内容。 - 图片：网页...
html转canvas canvas转图片示例
04-28
该样例代码是 html转canvas canvas转图片 功能示例，代码下载完成后请在web服务器上发布后进行代码测试，否则会因跨域问题导致代码出错。 压缩包资源： canvas2image.js demo.html githug.txt html2canvas.min.js S1...
convert html body to image and download
06-06
convert html body to image and download
将页面转换为canvas导出为图片
路在远方
10-16 4626
一种快捷的方式是将dom文本内嵌在svg对象中，再将svg对象转换为xml/svg data url,这个地址可以作为图片对象的地址直接在页面中展示。但是Dom对象不能直接在Canvas中绘制，需要先将dom文本转换图片地址，然后在图片加载时将其内容绘制在canvas上。需要注意的是，svg对象下可以直接放置svg对象，也可以放非svg对象，如div p h1等等，但是需要作为。需要注意的是，xml/svg data url不能作为下载地址，需要将其转换为base64地址。的子集，否者不会展示内容。
将canvas转化为图片
sinat_40723068的博客
11-13 2427
1.首先把浏览器设置为可跨域的模式 点此查看 2.然后找到canvas的 canves的绘制的 Id，将下方的id：canvas的替换为自己的canvasID var img = document.createElement("img"); img.id = "my_img"; document.getElementsByTagName("body")[0].appendChild(img) document.getElementById('my_img').src = document.getEleme
canvas画布生成图片并下载
rhcjqmm666的博客
10-26 321
canvas画布生成图片并下载
使用html2canvas将dom生成图片 并下载图片到本地
qq_73720914的博客
08-17 1279
首先 要用canvas绘画某个dom元素的时候 我们需要在该获取到我们要下载的dom元素,在上面的html图片中 我在标签上添加了ref="html2canvas" vue中获取dom元素的方法 代码实现参考下面。这是用html编写出来的页面 我现在需要将这个元素转换成图片并下载到本地,我的做法是利用canvas绘制成图片 然后利用a标签进行下载 下面是我的实现过程。这样 我们就成功的绘制好图片 并且下载成功了 有什么疑问都可以在评论区留言。
前端canvas的学习和将网页生成canvas图片
动感超人的博客
03-12 1488
目标 最终可以实现二维码填充在指定图片位置,并且可以填充文字在图片中 学习笔记,个人记录, 学习掘金大佬德育处主任 https://juejin.cn/user/2673620576140030 专栏 https://juejin.cn/column/7113168145912692773 作者仓库 https://gitee.com/k21vin/thunder-monkey-canvas 第一个canvas <body> <canvas id="c"
Vue3 canvas转png，base64编码的图片转file
weixin_43932092的博客
03-01 764
【代码】Vue3 canvas转png，base64编码的图片转file。
canvas转换图片
weixin_47297537的博客
03-27 631
【代码】canvas转换图片。
canvas2image插件下载
05-27
您可以在Github上找到canvas2image插件的下载链接。以下是该插件的Github页面链接： https://github.com/hongru/canvas2image 您可以在页面上找到下载链接和使用说明。请注意，该插件可能需要您具有一定的编程知识...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值