canvas下载图片
canvas下载图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas{ border: 1px solid black; }
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<a download="canvas.jpg" href="" onclick="downloadpic(this);">下载图片</a>
<script>
var canvas = document.getElementById("myCanvas");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
var ctx = canvas.getContext("2d");
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Hello World", ox, oy);
function downloadpic(e) {
var image = canvas.toDataURL("image/jpg", 1);
e.href = image;
};
</script>
</body>
</html>
canvas下载图片的更多相关文章
- 浏览器 canvas下载图片 网络错误
在使用html2canvas截取页面的时候发现图片死活保存不到本地,chrome一直报“网络错误”, 主要出现这个问题是canvas保存图片到本地时各个浏览器像素的限制不同, 所以将图片数据转换成Bl ...
- Canvas 实现图片合成并下载合成图片
现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...
- 解决 canvas 下载含图片的画布时的报错
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...
- 利用canvas 导出图片
1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
- canvas转图片
<script> var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100; window.onload ...
- js 根据url 下载图片
downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttr ...
- 神奇的canvas——巧用 canvas 为图片添加水印
代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...
- Jszip的使用和打包下载图片
因为canvas总结到后面又想到了jszip的一些事情,那就索性也回去看看吧.试过,至少谷歌和火狐都是支持jszip的. 1. jszip的使用 官方文档说的很清楚了,而且也有读取zip文件.生成z ...
随机推荐
- Java API操作ZK node
创建会话 建立简单连接 /** * 测试创建Zk会话 * Created by liuhuichao on 2017/7/25. */ public class ZooKeeper_Construct ...
- .NET c# 新特性
<.NET之美>p181 Product item=new Product(188),{Price=4998.5F},Name="Lumia 920" 实例化,.NET ...
- autoburn eMMC hacking
#!/bin/sh # autoburn eMMC hacking # 说明: # 看一下富林的自动烧录的执行脚本原理. # # -- 深圳 龙华樟坑村 曾剑锋 # 创建sd卡挂载目录 if [ ! ...
- JAVA多线程----用--进阶--》网络编程2
import java.io.*; import java.net.*; /** * 服务器端逻辑线程 */ public class LogicThread extends Thread { Soc ...
- 通过反编译让SpecFlow支持多层属性值的验证
需求:在使用SpecFlow时,我希望能对目标对象所关联的对象属性进行验证,但SpecFlow(Version 1.9.0)无法实现.如图中红框,可以对专户所属的金融机构的名称进行验证. 反编译步骤 ...
- Kalman Filter
本质是一种最优估计法. 核心是"预测"+"测量反馈". 一个视频: http://blog.sina.com.cn/s/blog_461db08c0102uw ...
- 关于json格式字符串解析并用mybatis存入数据库
园子里面找了很多关于json解析后存入数据库的方法,不是太乱,就是没有写完,我下面的主题代码多是受下面两位的启发,请按顺序查看 http://www.cnblogs.com/tian830937/p/ ...
- sentry docker-compsoe 安装以及简单使用
1. 准备环境 docker docker-compose 2. 安装 a. docker-compose git clone git clone https://github.com/get ...
- python 抓取数据,pandas进行数据分析并可视化展示
感觉要总结总结了,希望这次能写个系列文章分享分享心得,和大神们交流交流,提升提升. 因为半桶子水的水平,一直在想写什么,为什么写,怎么写. 直到现在找到了一种好的办法: 1.写什么 自己手上掌握的,工 ...
- Java API 操作Redis
针对Redis的Java客户端有很多种,具体查看官网信息:https://redis.io/clients#java 本次测试使用Jedis API,Jedis使用方便,其api方法名称与redis命 ...