javascript将html转为图片保存。

js将html转为图片主要是通过html2canvas这个插件去操作的。具体实现如下:

html部分:

<!--index.html-->
    <div id="container">
        this is a test page!!!
        <i></i>
        <button onclick="download()">download</button>
    </div>
    <script src="./bundle.js"></script>

javascript部分:

//index.js
import ‘./index.scss‘;
import html2canvas from ‘html2canvas‘

window.download = () => {
    let container = document.getElementById(‘container‘)
    console.log(container)
    html2canvas(container).then(canvas => {
        let imgData = canvas.toDataURL()
        let link = document.createElement(‘a‘)
        link.href = imgData
        link.download = ‘test.png‘
        link.click()
    })
}

利用html5的download属性实现文件下载

时间: 2024-10-10 13:24:08

javascript将html转为图片保存。的相关文章

C#实现 word、pdf、ppt 转为图片

office word文档.pdf文档.powerpoint幻灯片是非常常用的文档类型,在现实中经常有需求需要将它们转换成图片 -- 即将word.pdf.ppt文档的每一页转换成一张对应的图片,就像先把这些文档打印出来,然后再扫描成图片一样.所以,类似这种将word.pdf.ppt转换为图片的工具,一般又称之为"电子扫描器",很高端的名字! 一.那些场合需要将word.pdf.ppt转换为图片? 在我了解的情况中,通常有如下三种场景,有将word.pdf.ppt文档转换成图片的需求.

php 上传图片:php上传图片代码(同时图片保存到数据)

本文<php 上传图片:php上传图片代码(同时图片保存到数据库)>完美解决:上传图片代码(同时图片保存到数据库教程)/*下面提供的php上传图片代码是一款利用php copy来上传文件的,他不但可以把图片上传到服务器,同时还把图片的地址保存到了mysql教程数据库里面哦.*/ // 连接数据库$conn = mysql_connect("localhost", "phpdb", "phpdb");mysql_select_db(&q

ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片

ASP.NET下载远程图片保存到本地的方法.保存抓取远程图片 2012-05-16 11:25:51     我来说两句      收藏    我要投稿 以下介绍两种方法:1.利用WebRequest,WebResponse 类WebRequest wreq=WebRequest.Create("http://up.2cto.com/2012/0516/20120516112717995.gif");    HttpWebResponse wresp=(HttpWebResponse)

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

原文:3 Ways to Preload Images with CSS, JavaScript, or Ajax 译文:利用CSS.JavaScript及Ajax实现图片预加载的三大方法 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.

iOS--将图片保存至本地相册

今天做聊天,领导说对方给我发一个图片,我要保存到本地,IOS的UIKit Framework提供了UIImageWriteToSavedPhotosAlbum方法对图像进行保存,该方法会将image保存至用户的相册中: 上代码: void UIImageWriteToSavedPhotosAlbum ( UIImage *image, id completionTarget, SEL completionSelector, void *contextInfo ); 参数说明: image : 需

js截图及绕过服务器图片保存至本地(html2canvas)

今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是生成的图片模糊 //直接选择要截图的dom,就能截图,但是因为canvas的原因,生成的图片模糊 html2canvas(document.querySelector('div')).then(function(canvas) { document.body.appendChild(canvas);

使用javascript,jquery实现的图片轮播功能

使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以直接把代码copy下来,放入一个html 文件即可,然后把jquery文件放在同一个文件夹下就可以了.文件下载地址:http://download.csdn.net/detail/xyytcs/5037545 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

图片保存到数据库以及C#读取图片

图片保存到数据库,如果是sqlserver就是Image类型,如果保存到Oracle就是blob类型,在c#中相对应的就是byte[]类型,同时只需要对读出的数据强制转换就行(byte[])object. 1. 将图片保存为byte数组 //参数是图片路径,返回Byte[]类型 public byte[] GetPictureData(string imagepath) { FileStream file = new FileStream(imagepath, FileMode.Open); b

WP开发图片保存到独立存储并从独立存储中读取

需要添加引用命名空间 using System.IO; using System.IO.IsolatedStorage; 1.将图片保存到独立存储空间 1 using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication()) 2 3 { 4 5 if (myIsolatedStorage.FileExists(App.fileName)) 6 7 { 8 9 myIsola