Skip to content

Instantly share code, notes, and snippets.

@abe-lib
Last active March 17, 2019 06:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abe-lib/0e179f54404e1c968ceeb2e89e917672 to your computer and use it in GitHub Desktop.
Save abe-lib/0e179f54404e1c968ceeb2e89e917672 to your computer and use it in GitHub Desktop.
LGTMaker
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