js html 生成长图,html生成图片

# html生成图片

~~~

margin: 0;

}

.test{

width: 100px;

height: auto;

text-align: center;

line-height: 100px;

background-color: #87CEEB;

display: inline-block;

vertical-align:top;

}

canvas{

margin-right: 5px;

}

.down{

float: right;

margin: 40px 10px;

}

下载

asdfa asdfadsf sdf

//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊

/*html2canvas(document.querySelector('div')).then(function(canvas) {

document.body.appendChild(canvas);

})*/

function createImg(){

//创建一个新的canvas

var canvas2 = document.createElement("canvas");

let _canvas = document.querySelector('div');

var w = parseInt(window.getComputedStyle(_canvas).width);

var h = parseInt(window.getComputedStyle(_canvas).height);

//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了

canvas2.width = w * 2;

canvas2.height = h * 2;

canvas2.style.width = w + "px";

canvas2.style.height = h + "px";

//可以按照自己的需求，对context的参数修改,translate指的是偏移量

// var context = canvas.getContext("2d");

// context.translate(0,0);

var context = canvas2.getContext("2d");

context.scale(2,2);

html2canvas(document.querySelector('div'),{canvas:canvas2}).then(function(canvas) {

// document.body.appendChild(canvas);//输出

//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载

document.querySelector(".down").setAttribute('href',canvas.toDataURL());

document.querySelector(".src").setAttribute('src',canvas.toDataURL());

});

}

~~~

原文：https://www.cnblogs.com/cjh1111/p/7133838.html

js html 生成长图,html生成图片相关推荐

android webview生成长图,Android 生成长图并添加水印（二）
本文主要介绍一下RecyclerView生成长图. 是接着上一篇Android 生成长图并添加水印(一)写的,不过单独看也是可以的,如有不清楚的地方可以先看上一篇或在下方留言. 先附效果图: Recy ...
京东商品长图功能来啦不用改图一键生成长图
产品是吸引顾客购买的关键,想要提升店铺转化率产品主图优化必不可少?首先基础优化是在设计主图的时候就要注意产品突出,使用场景来设计,根据产品的特点突出卖点,文案搭配要起到辅助的效果等等. 关于主图设计和 ...
WebView 生成长图，截图
关于 WebView 截图网上已经有很多例子了,但是在研究使用的时候发现一些问题,在这记录一下,供大家参考. 首先是WebView 的截图,只能截取WebView 内显示的内容.大小也就是WebVi ...
vue中引入HTMLcanvas生成长图
项目中需要实现将某块html生成img图片,供用户保存到本地,最终采用html2canvas实现. 1.如何引入html2canvas? 项目架构是vue-cli的单页应用,如果在index.html ...
Android拼接合并图片生成长图
Android拼接合并图片生成长图代码实现合并两张图片,以第一张图片的宽度为标准,如果被合并的第二张图片宽度和第一张不同,那么就以第一张图片的宽度为准线,对第二张图片进行缩放. 假设根目录的Pict ...
python实现将ppt内容导出为图片并拼接成长图
一个完整的车轮子- 参数1输入绝对路径,参数2输出带后缀的文件名称. 生成的长图会直接生成在和ppt所在的同级目录. 同时会生成一个和ppt名称一样的目录,用于存放每页ppt的图片. # -*- co ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js
介绍 Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars. Github htt ...

js html 生成长图,html生成图片

js html 生成长图,html生成图片相关推荐

最新文章

热门文章