canvas.toDataURL(type, args)

canvas.toDataURL(type, args)
该方法能够将canvas转换为图像，图像是基于Base64编码的。如果不指定两个参数，无参数调用该方法，转换的图像格式为png格式

•type:指定要转换的图像格式，如 image/png、image/jpeg等。
•args:可选参数。例如，如果type为image/jpeg，则args可以是0.0和0.1之间的值，以指定图像的品质。

例如，下面的代码将canvas中已绘制的内容在一个新的浏览器窗口或选项卡中打开：

var canvas = document.getElementById("myCanvas");
window.open(canvas.toDataURL("image/png"));

其他资料地址：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

时间： 2024-10-10 06:46:39

canvas.toDataURL(type, args)的相关文章

canvas toDataURL() 方法如何生成部分画布内容的图片

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI .可以使用 type参数其类型,默认为 PNG 格式.图片的分辨率为96dpi. 如果画布的高度或宽度是0,那么会返回字符串"data:,". 如果传入的类型非"image/png",但是返回的值以"data:image/png"开头,那么该传入的类型是不支持的. Chrome支持"image/webp"类型. 语法 ca

快速解决Canvas.toDataURL 图片跨域的问题

出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource S

canvas toDataUrl 跨域问题

使用canvas 的 toDataUrl方法会遇到跨域问题 chrome 会报下面的错误: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. Firefox 会报下面的错误: SecurityError: The operation is insecure. 解决方案分两步: 1.在服务端设置响应头部 Access-

canvas.toDataURL 由于跨域报错的解决方法

关于canvas.toDataURL 由于跨域报错的解决方法用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 解决方法,相信大家都知道了,就是在图片img加上crossOri

canvas.toDataURL 画布导出图片

<html> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <head> <script> window.onload = function () { draw(); var saveButton = document.getElementById("saveImageBtn"); bindButtonEvent(saveButton,

canvas toDataURL转base64实现多张图片合成一个图片

前端时间,做穿搭助理时遇到这样一个问题:多张图片合成一张图片的问题业务背景是这样的: 后台会根据不同天气,根据某种规则:推荐给用户不同的衣服搭配.我们姑且将每一套我们称之为一个模板; 然后,还要求模板的布局按照衣服的类型,模板不同的布局方案现在大概模板类型有如下几个(后期还会加) 本来,计算,定位这个模板已经够头疼了的:现在产品说这个加入衣橱操作要把整个模板合成一张图,放到衣橱图片库中还好之间简单看过<H5高级程序设计>貌似提到了,可以直接将canvas转成图片的方法: wsc上

html5中canvas（2）

1.绘制图片(drawImage)(重点) 1.1 基本绘制图片的方式 context.drawImage(img, x, y); 参数: img 可以为:图片.视频或者canvas画布 x,y 绘制图片左上角的坐标, img是绘制图片的dom对象. 1.2 在画布上绘制图像,并规定图像的宽度和高度 context.drawImage(img, x, y, width, height); width:绘制到canvas中展示的宽度如果指定宽高,最好成比例,不然图片会被拉伸等比公式: toH

HTML5的新标签之一的Canvas

一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas> 英 ['k?nv?s] 美 ['k?nv?s] 帆布画布 Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素. canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. HTML5之前的web页面只

千呼万唤 HTML 5 (8) - 画布（canvas）之绘制图形

[索引页][源码下载] 作者:webabcd 介绍HTML 5: 画布(canvas)之绘制图形画布 Demo - 画布的基本概念及 Demo,canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL() 在画布上绘制矩形 - canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, str