svgピクチャエクスポートピクチャを導入
11878 ワード
文書ディレクトリ記事参照 SVGが描いた図形を画像 に変換する svg導入ピクチャ表示 記事リファレンス JavaScriptを使用してsvgをピクチャフォーマット にエクスポート svgサブラベルImageによって導入されたピクチャは、どのようにピクチャを平らにすることができますか SVGで描かれた図形を画像に変換
svg画像表示の導入
/**
* svg
* @param node svg => document.querySelector('svg')
* @param name
* @param width
* @param height
* @param type
*/
export const covertSVG2Image = (node, name, width, height, type = 'png') => {
let serializer = new XMLSerializer()
let source = '\r
' + serializer.serializeToString(node)
let image = new Image()
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
let canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
let context = canvas.getContext('2d')
context.fillStyle = '#fff'
context.fillRect(0, 0, 10000, 10000)
image.onload = function () {
context.drawImage(image, 0, 0)
let a = document.createElement('a')
a.download = `${name}.${type}`
a.href = canvas.toDataURL(`image/${type}`)
a.click()
}
}
svg画像表示の導入
<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>Documenttitle>
head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1258px" height="960px">
<image width="200" height="200" stroke="black" href="http://jtl3d.oss-cn-hangzhou.aliyuncs.com/contents/54c89316-bcf7-59f1-934b-9314429f5b7a/top.png">
image>
svg>
body>
html>