Last active
March 17, 2019 06:37
-
-
Save abe-lib/0e179f54404e1c968ceeb2e89e917672 to your computer and use it in GitHub Desktop.
LGTMaker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
new Vue({ | |
el: "#app", | |
data: function () { | |
return { | |
dragging: false, | |
text: "LGTM", | |
fontfamily: "Arial", | |
fonts : ['American Typewriter','Arial','Arial Black','Cambria','Chalkboard','Copperplate','Futura','Georgia','Gill Sans','Helvetica','Impact','PT Mono','PT Sans','Tahoma','Times New Roman','Verdana'], | |
size: 100, | |
color:"#000000", | |
border:"#000000", | |
borderthin:"0", | |
borderColor:"", | |
rotate: 0, | |
rotateIv: 0, | |
textlength:0, | |
writemode:"lr", | |
d: { x: 300, y: 200 }, | |
isDownloadHide: true, | |
start: { x: 0, y: 0 } | |
} | |
}, | |
mounted() { | |
this.d.y = this.d.y + this.size | |
}, | |
methods: { | |
startDrag: function (e) { | |
e = e.changedTouches ? e.changedTouches[0] : e | |
this.dragging = true | |
this.start.x = e.offsetX - this.d.x | |
this.start.y = e.offsetY - this.d.y | |
}, | |
onDrag: function (e) { | |
e = e.changedTouches ? e.changedTouches[0] : e | |
if (this.dragging) { | |
this.d.x = e.offsetX - this.start.x; | |
this.d.y = e.offsetY - this.start.y; | |
} | |
}, | |
stopDrag: function () { | |
if (this.dragging) { | |
this.dragging = false | |
} | |
}, | |
upLoadFile: function(e) { | |
var vthis = this; | |
file = e.target.files[0]; | |
var fileRead = new FileReader(); | |
var img = new Image(); | |
var image = document.createElementNS('http://www.w3.org/2000/svg',"image"); | |
var stage = document.getElementById('svg'); | |
var stageWidth,stageHeight; | |
fileRead.readAsDataURL(file); | |
//ファイルの読み込みが成功したら | |
fileRead.onload = function(e){ | |
if(document.getElementById("image") != null){ | |
stage.removeChild(document.getElementById("image")); | |
} | |
img.src = e.target.result; | |
image.setAttributeNS('http://www.w3.org/1999/xlink','href',e.target.result); | |
}; | |
//イメージの読み込みが成功したら | |
img.onload = function(e){ | |
//image要素に属性をセット | |
image.id = "image"; | |
image.setAttribute("x",0); | |
image.setAttribute("y",0); | |
image.setAttribute("height","100%"); | |
image.setAttribute("width","100%"); | |
stageWidth = this.naturalWidth; | |
stageHeight = this.naturalHeight; | |
if(this.naturalWidth > this.naturalHeight){ | |
//横長の場合 | |
if(this.naturalWidth > 800){ //800px以上の場合幅を800pxに設定 | |
stageWidth = 800; | |
//アスペクト比を変えずに高さを変更する | |
stageHeight = this.naturalHeight * (stageWidth / this.naturalWidth); | |
} | |
}else{ | |
//縦長の場合 | |
if(this.naturalHeight > 800){ //800px以上の場合高さを800pxに設定 | |
stageHeight = 800; | |
//アスペクト比を変えずに幅を変更する | |
stageWidth = this.naturalWidth * (stageHeight / this.naturalHeight); | |
} | |
} | |
//svg要素のサイズを画像のサイズに合わせる | |
stage.setAttribute("viewBox","0 0 " +stageWidth+" " + stageHeight); | |
stage.setAttribute("width",stageWidth); | |
stage.setAttribute("height",stageHeight); | |
stage.setAttribute("style","min-height:"+stageHeight+"px;"); | |
//text要素を真ん中下部に配置 | |
stage.insertBefore(image,document.getElementById('text')); | |
vthis.d.x = stageWidth / 2; | |
vthis.d.y = stageHeight - vthis.size; | |
vthis.isDownloadHide = false; | |
}; | |
}, | |
download: function (e) { | |
var fileName = 'lgtm.png'; | |
var uri; | |
//svgを画像に変換し、ダウンロードする | |
svg2imageData(document.getElementById('svg'), (data) => { | |
uri = data; | |
var xhr = new XMLHttpRequest(); | |
xhr.open('GET', uri); | |
xhr.responseType = 'blob'; | |
xhr.onloadend = function () { | |
if (xhr.status !== 200) { | |
return false; | |
} | |
var blob = this.response; | |
if (window.navigator.msSaveOrOpenBlob) { | |
window.navigator.msSaveOrOpenBlob(xhr.response, fileName); | |
}else{ | |
var a = document.createElement("a"); | |
var blobUrl = window.URL.createObjectURL(new Blob([blob], { | |
type: blob.type | |
})); | |
document.body.appendChild(a); | |
a.style = "display: none"; | |
a.href = blobUrl; | |
a.download = fileName; | |
a.click(); | |
a.parentNode.removeChild(a); | |
} | |
}; | |
xhr.send(); | |
}, function(error) { | |
alert('failed to convert'); | |
}); | |
} | |
} | |
}) | |
function svg2imageData(svgElement, successCallback, errorCallback) { | |
var canvas = document.createElement('canvas'); | |
canvas.width = svgElement.width.baseVal.value; | |
canvas.height = svgElement.height.baseVal.value; | |
var ctx = canvas.getContext('2d'); | |
var image = new Image(); | |
image.onload = () => { | |
ctx.drawImage(image, 0, 0, image.width, image.height); | |
successCallback(canvas.toDataURL()); | |
}; | |
image.onerror = (e) => { | |
errorCallback(e); | |
}; | |
var svgData = new XMLSerializer().serializeToString(svgElement); | |
image.src = 'data:image/svg+xml;charset=utf-8;base64,' + btoa(unescape(encodeURIComponent(svgData))); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment