精华内容
下载资源
问答
  • 功能需求: 我们在网页中上传一张图片,选择不同的格式,将该图片转换为...3、最后将canvas转换为图片,显示在网页中。点击右键保存,就得到了不同格式的图片了。 toDataURL说明: 方法返回一个包含图片展示的 data URI
  • h5 Canvas转换为图片格式并下载

    千次阅读 2019-06-05 00:03:05
    HTMLCanvasElement.toDataURL() ...图片的分辨率96dpi。 如果画布的高度或宽度是0,那么会返回字符串“data:,”。 如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么该传入的类型...

    在平常工作中,我们经常会遇到通过Canvas进行展示内容的情况,在展示之后还会要求将Canvas进行已图片格式进行保存.该如何完成这一需求?
    通常情况下,我们需要完成两个步骤:

    1.Canvas转化为DOMString形式的String
    2.将图片下载到本地

    一.转化格式

    1.HTMLCanvasElement.toDataURL()

    使用 HTMLCanvasElement.toDataURL()进行处理数据,该方法返回一个包含图片展示的 data URI 。也就是我们常说的base64编码字符串,可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。

    2.注意点⚠️
    • 如果画布的高度或宽度是0,那么会返回字符串“data:,”。
    • 如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么说明该传入的类型是不支持的。
    • Chrome支持“image/webp”类型。
    3.语法
    canvas.toDataURL(type, encoderOptions);
    
    参数

    type 图片格式,默认为 image/png
    encoderOptions 在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

    返回值

    包含 data URI 的字符串。

    示例

    有如下HTMLElement(“canvas”)元素

    <canvas id="canvas" width="50" height="50"></canvas>
    

    可以用这样的方式获取一个 data-URL

    var canvas = document.getElementById("canvas");
    var dataURL = canvas.toDataURL();
    console.log(dataURL);
    // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
    // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
    

    配合参数选项可以进行如下使用,设置jpegs图片的质量

    var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
    // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
    var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
    var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
    

    二.下载图片

    对于图片下载,我们通过创建一个隐藏的a标签的形式进行下载,通过模拟点击事件的形式进行触发.

          // 设置下载并转换
          const download = document.getElementById('download');
          download.onclick = function () {
            var bloburl = canvas.toDataURL();
            console.log('bloburl', bloburl);
            var anchor = document.createElement('a');
            if ('download' in anchor) {
              anchor.style.visibility = 'hidden';
              anchor.href = bloburl;
              anchor.download = name;
              
              document.body.appendChild(anchor);
              var evt = document.createEvent('MouseEvents');
              evt.initEvent('click', true, true);
              anchor.dispatchEvent(evt);
              
              document.body.removeChild(anchor);
            } else {
              location.href = bloburl;
            }
          }
    

    当下载完成之后,将a标签节点从dom中移除掉,完整代码如下所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>canvas转图片并下载</title>
    
    </head>
    <body>
    <canvas id="canvasId" width="500" height="500" >您的浏览器不支持使用该标签</canvas>
    <button id="download">下载图片</button>
    </body>
    <script>
        window.onload = function () {
          // 设置canvas
          const canvas = document.getElementById('canvasId');
          const context = canvas.getContext('2d');
    
          context.fillStyle = '#999';
          context.font = '18px Palatino';
          context.lineWidth = '10';
          context.fillText('我是用来下载的Canvas图片', canvas.width / 2, canvas.height / 2);
          const img = new Image();
          img.src = './bird1.png';
          img.onload = function () {
            context.drawImage(img, canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.height / 2);
          }
    
    
          // 设置下载并转换
          const download = document.getElementById('download');
          download.onclick = function () {
            var bloburl = canvas.toDataURL();
            console.log('bloburl', bloburl);
            var anchor = document.createElement('a');
            if ('download' in anchor) {
              anchor.style.visibility = 'hidden';
              anchor.href = bloburl;
              anchor.download = name;
    
              document.body.appendChild(anchor);
              var evt = document.createEvent('MouseEvents');
              evt.initEvent('click', true, true);
              anchor.dispatchEvent(evt);
    
              document.body.removeChild(anchor);
            } else {
              location.href = bloburl;
            }
          }
        }
    </script>
    </html>
    
    

    在这里插入图片描述
    点击下载能够完成Canvas图片的下载.

    展开全文
  • 这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片...如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换图片格式: // Conver[......] 阅读全文>>
  • 本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法。分享给大家供大家参考,具体如下: 1、convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将...
  • 1.通用的canvas转化图片下载是没有后缀名的,这个可以有; 2.因为canvas是页面加载之后才导出,这样图像就不能导出到word,资源中先把canvas生成的图片放到img中,在隐藏canvas,然后再导出,ok
  • 需要把网页部分内容做正文,并把原网页转成pdf作为附件,发送邮件给boss,将svg转成canvas显示,但是后来发现canvas也无法正常显示,最后不得已,只能将canvas标签再一次转成图片格式
  • function b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; var i = 0;... 欢迎关注我的微信公众号: 如无特殊说明,文章均本站原创,转载请注明出处!

    c2d95f6c4bed265a198759b742dc0611.pngfunction b64ToUint8Array(b64Image) {

    var img = atob(b64Image.split(',')[1]);

    var img_buffer = [];

    var i = 0;

    while (i < img.length) {

    img_buffer.push(img.charCodeAt(i));

    i++;

    }

    return new Uint8Array(img_buffer);

    }

    var b64Image = canvas.toDataURL('image/jpeg');

    var u8Image = b64ToUint8Array(b64Image);

    var formData = new FormData();

    formData.append("image", new Blob([ u8Image ], {type: "image/jpg"}));

    var xhr = new XMLHttpRequest();

    xhr.open("POST", "/api/upload", true);

    xhr.send(formData);

    用上面这种方式在前端通过js处理,server端不需要进行任何额外处理。

    我认为是最方便最直接的办法,反而很多高赞回复,需要server进行各种处理,不推荐。

    Had to convert canvas Base64-encoded image to Uint8Array Blob.

    欢迎关注我的微信公众号:

    如无特殊说明,文章均为本站原创,转载请注明出处!

    展开全文
  • <p>11111111111 <p>11111111111 <p>11111111111 <p>11111111111 <p>11111111111 <p>11111111111 <p>11111111111 [removed] ... $("body").append('下载的图片">保存图片</a>'); }); [removed]
  • 需求:小程序获取到微信头像和昵称,生成2019年随机发生的趣事 实现:微信小程序实现 用canvas 生成图片 并保存
  • 问题来源 这个问题,源于上传图片文件的时候,后台限制了2MB的大小,but在调起相机拍照的时候分分钟超过了2MB,为了不影响用户体验和功能需求,需要前端对大小进行压缩,然后传到后台。...将file文件转化为base64 /**
  • 本篇文章主要介绍了js实现canvas保存图片为png格式并下载到本地的方法,非常具有实用价值,需要的朋友可以参考下
  • canvas转化为图片

    千次阅读 2017-07-04 16:03:16
    别啰嗦了! 代码最为直接点!!! html>  meta http-equiv="X-UA-Compatible" content="chrome=1">  ...canvas转化图片 head>  script>   window.onload = function() {   draw();   

    别啰嗦了!吐舌头

    代码最为直接点!!!

    1. <html>  
    2. <meta charset="utf-8"/>
    3. <meta http-equiv="X-UA-Compatible" content="chrome=1">  
    4. <title>canvas转化图片</title>
    5. <head>  
    6. <script>  
    7.         window.onload = function() {  
    8.             draw();  
    9.             var saveButton = document.getElementById("saveImageBtn");  
    10.             bindButtonEvent(saveButton, "click", saveImageInfo);  
    11.             var dlButton = document.getElementById("downloadImageBtn");  
    12.             bindButtonEvent(dlButton, "click", saveAsLocalImage);  
    13.         };  
    14.             function draw(){  
    15.                 var canvas = document.getElementById("thecanvas");  
    16.                 var ctx = canvas.getContext("2d");  
    17.                 ctx.fillStyle = "rgba(125, 46, 138, 0.5)";  
    18.                 ctx.fillRect(25,25,100,100);   
    19.                 ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";  
    20.                 ctx.fillRect(58, 74, 125, 100);  
    21.                 ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color  
    22.                 ctx.fillText("Gloomyfish - Demo", 50, 50);  
    23.             }  
    24.               
    25.             function bindButtonEvent(element, type, handler)  
    26.             {  
    27.                    if(element.addEventListener) {  
    28.                       element.addEventListener(type, handler, false);  
    29.                    } else {  
    30.                       element.attachEvent('on'+type, handler);  
    31.                    }  
    32.             }  
    33.             function saveImageInfo ()   
    34.             {  
    35.                 var mycanvas = document.getElementById("thecanvas");  
    36.                 var image    = mycanvas.toDataURL("image/png");  
    37.                 var w=window.open('about:blank','image from canvas');  
    38.                 w.document.write("<img src='"+image+"' alt='from canvas'/>");  
    39.             }  
    40.             function saveAsLocalImage () {  
    41.                 var myCanvas = document.getElementById("thecanvas");
    42.                 var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");   
    43.                 window.location.href=image
    44.             }
    45.         </script>  
    46. </head>  
    47. <body bgcolor="#E6E6FA">  
    48.     <div>  
    49.         <canvas width=350 height=350 id="thecanvas"></canvas>  
    50.         <button id="saveImageBtn">保存图片</button>  
    51.         <button id="downloadImageBtn">下载吧</button>  
    52.     </div>  
    53. </body>  
    54. </html>  

    展开全文
  • html2canvas 网页对图片加水印
  • 如何将canvas转化为图片

    万次阅读 2017-02-21 15:30:05
    有时候,我们绘制好的canvas想存储本地图片,该怎么做呢?canvas提供了一个重要的方法toDataURL(),这个方法能把画布里的图案转变成base64编码格式的png或者其他格式的图片(根据你传入的mine类型的参数),然后返回 ...

    有时候,我们绘制好的canvas想存储为本地图片,该怎么做呢?canvas提供了一个重要的方法toDataURL(),这个方法能把画布里的图案转变成base64编码格式的png或者其他格式的图片(根据你传入的mine类型的参数),然后返回 Data URL数据。

    下面是html中的canvas画布

    <canvas id="canvas"></canvas>
    <button class="button-balanced" id="save">save</button>
    <br />
    <a href="" download="canvas_love.png" id="save_href">
        <img src="" id="save_img"/>
    </a>

    对应的js实现
    var c=document.getElementById("canvas");
    function drawLove(canvas){
        let ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.fillStyle="#E992B9";
        ctx.moveTo(75,40);
        ctx.bezierCurveTo(75,37,70,25,50,25);
        ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
        ctx.bezierCurveTo(20,80,40,102,75,120);
        ctx.bezierCurveTo(110,102,130,80,130,62.5);
        ctx.bezierCurveTo(130,62.5,130,25,100,25);
        ctx.bezierCurveTo(85,25,75,37,75,40);
        ctx.fill();
    }
    drawLove(c); 
    
    var butSave = document.getElementById("save");
    butSave.οnclick=function(){
        var svaeHref = document.getElementById("save_href");
        /*
         * 传入对应想要保存的图片格式的mime类型
         * 常见:image/png,image/gif,image/jpg,image/jpeg
         */
        var img = document.getElementById("save_img");
        var tempSrc = canvas.toDataURL("image/png");
        svaeHref.href=tempSrc; 
        img.src=tempSrc;  
    }; 
    点击save按钮后,显示图片,点击图片即可弹出下载对话框。




    展开全文
  • 使用JavaScript将图片拷贝进画布要想将图片放入画布里,我们使用canvas元素的drawImage方法:// Converts image to canvas; returns new canvas element function convertImageToCanvas(image) { var canvas = ...
  • 原生的写法Titlevar canvas = document.getElementById('canvas');var context = canvas.getContext('2d');//返回一个用于在画布上绘图的环境,当前唯一的合法值是 "2d",它指定了二维绘图,返回一个 ...
  • canvas 合并图片并将canvas转换图片

    千次阅读 2018-05-03 15:13:22
    function canvasToImage(canvas,idName) { console.log(canvas) var image = new Image(); image.src = canvas.toDataURL("image/png"); $("#" + idName).attr('src',image.src) return ...
  • 最近在一个项目中,遇到了一个问题,需要把生成的canvas形式的二维码转换为图片,可以长按识别,保存等。查找了一些资料归纳总结了一些知识。 默认在jq库里进行,引入jquery.qrcode.min.js库,将canvas图片转化为img...
  • 使用JS 将canvas 转化图片 ( H5 )

    千次阅读 2018-12-27 17:16:22
    我靠…图片这么大 给我自己吓了一跳。 OK 大概就是这样了。 我用了半个小时把大概的逻辑写好了,然后用了五个小时找错误…再最后一刻终于找到啦! 那就是写错了一个字母…啊啊啊啊 卧槽 猛虎落泪了已经 上代码 &...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style type="... #canvas{ border:1px s
  • http://html2canvas.hertzen.com/ 二 安装依赖引入 npm install html2canvas import html2canvas from 'html2canvas'; 三 简单封装html2canvas import html2canvas from 'html2canvas'; const exp = {} //...
  • canvas 保存图片兼容ie

    2019-03-22 10:35:04
    ie使用:canvas.msToBlob(); 谷歌使用:canvas.toDataURL(); if (window.navigator.msSaveOrOpenBlob) { var imgData = this.canvas.msToBlob(); var blobObj = new Blob([imgData]); ...
  • canvas图片,图片canvas

    千次阅读 2019-01-22 16:11:05
    canvas图片 关键点: canvas.toDataURL(‘image/png’) ,返回生成的图片地址(base64) &lt;!DOCTYPE html&gt; &lt;html&...canvas转换图片&lt;/title&gt; &lt;
  • 本文主要介绍了canvas压缩图片转换成base64格式输出文件流的方法,具有很好的参考价值。下面跟着小编一起来看下吧
  • taro+canvas画圆形进度条+canvas图片

    千次阅读 2020-08-21 15:21:41
    /** * @name ProgresCanvas * @desc 进度条 * @author 方知有 * @taro 3.07 * @date 2020/08/06 ...import { View, Canvas, Image, CoverView } from "@tarojs/components"; import styles fro...
  • 主要介绍了vue 使用html2canvas将DOM转化为图片的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 思路很简单,就是在canvas上drawImage,然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { //image一定是一个图片对象,不然获取不到宽高 var canvas = document.createElement("canvas...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,244
精华内容 14,497
关键字:

canvas转化图片