html 2 canvas And FileSaver画像をローカルに保存
2952 ワード
最近プロジェクトをしてhtmlを1つの画像に保存するためにhtml 2 canvasフロントエンドプラグインを使って実現しました.
html 2 canvas GithubアドレスFileSaver Githubアドレス
無料の中国語ネットのCDNを推薦します
サポートされているブラウザ Firefox 3.5+ Google Chrome Opera 12+ IE9+ Safari 6+
参照demo
使用可能なパラメータ
パラメータ名
を選択します.
デフォルト
説明
allowTaint
boolean
false
Whether to allow cross-origin images to taint the canvas--ドメイン間で許可
background
string
#fff
Canvas background color, if none is specified in DOM. Set undefined for transparent---canvasの背景色は、デフォルトの透明度が設定されていない場合
height
number
null
Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高さ設定
letterRendering
boolean
false
Whether to render each letter seperately. Necessary if letter-spacing is used.---文字間隔が設定されている場合に役立ちます
logging
boolean
false
Whether to log events in the console.---コンソルでlog()における出力情報
proxy
string
undefined
Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---プロキシアドレス
taintTest
boolean
true
Whether to test each image if it taints the canvas before drawing them---レンダリング前に画像をテストするかどうか
timeout
number
0
Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---ピクチャロード遅延、デフォルト遅延0、ミリ秒単位
width
number
null
Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas幅
html 2 canvas GithubアドレスFileSaver Githubアドレス
無料の中国語ネットのCDNを推薦します
サポートされているブラウザ
参照demo
$(".example1").on("click", function (event) {
event.preventDefault();
html2canvas(document.body, {
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
/**
* ， FileSaver
*/
canvas.toBlob(function (blob) {
saveAs(blob, "saveImage.png");
});
/**
* base64
* @type {string}
*/
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
document.body.appendChild(newImg);
}
});
});
使用可能なパラメータ
パラメータ名
を選択します.
デフォルト
説明
allowTaint
boolean
false
Whether to allow cross-origin images to taint the canvas--ドメイン間で許可
background
string
#fff
Canvas background color, if none is specified in DOM. Set undefined for transparent---canvasの背景色は、デフォルトの透明度が設定されていない場合
height
number
null
Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高さ設定
letterRendering
boolean
false
Whether to render each letter seperately. Necessary if letter-spacing is used.---文字間隔が設定されている場合に役立ちます
logging
boolean
false
Whether to log events in the console.---コンソルでlog()における出力情報
proxy
string
undefined
Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---プロキシアドレス
taintTest
boolean
true
Whether to test each image if it taints the canvas before drawing them---レンダリング前に画像をテストするかどうか
timeout
number
0
Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---ピクチャロード遅延、デフォルト遅延0、ミリ秒単位
width
number
null
Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas幅