kicap/T-shirt_designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added design front and back shirt and save file to phone(android)

Browse Source
This commit is contained in:
kicap1992
2021-07-08 02:27:39 +08:00
parent f0f1c87d07
commit 8ce4f7968b
75 changed files with 100273 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
www/assets/js/desain_2.js
View File

@ -44,7 +44,7 @@ function onDeviceReady() {
var color = $_GET('color');
$("#sini_div_baju_color").attr("style","background-image: url(assets/img/"+color+".PNG); height: 350px; width: 100%;background-size: 100% 100%;");
$("#sini_div_baju_color").attr("style","background-image: url(assets/img/"+color+".JPG); height: 350px; width: 100%;background-size: 100% 100%;");
///// end get warna baju ///////
function toastnya(id,mesej){
@ -906,21 +906,24 @@ function save_desain() {
var penyimpanan = localStorage.getItem('simpanan')
var a = JSON.parse(save_data);
var id = 1;
color = color.slice(0,-1);
if (penyimpanan == null) {
var ini = [{"id" : id ,"canvas" : color ,"isi" : a}];
var ini = [{"id" : id ,"canvas" : color ,"isi_depan" : a, "isi_belakang" : null}];
// localStorage.setItem('coba2', JSON.stringify(ini));
}
else
{
id = JSON.parse(penyimpanan);
id = id[id.length-1].id + 1
var ini = [{"id" : id ,"canvas" : color ,"isi" : a}];
var ini = [{"id" : id ,"canvas" : color ,"isi_depan" : a, "isi_belakang" : null}];
penyimpanan = JSON.parse(penyimpanan)
ini = penyimpanan.concat(ini);
// localStorage.setItem('coba2', JSON.stringify(ini));
}
localStorage.setItem('simpanan', JSON.stringify(ini));
window.location.replace("desain_complete.html?id="+id);
// window.location.replace("desain_complete.html?id="+id);
window.location.replace("desain_belakang.html?color="+color+"2&id="+id);
}
function cek_simpanan(){

117
www/assets/js/desain_3.js
View File

@ -91,13 +91,13 @@ for (var i = 0; i < list_desain.length; i++) {
// console.log(list_desain[i].id);
if (list_desain[i].id == id_desain) {
baju_color = list_desain[i].canvas
detail_desain = list_desain[i].isi;
console.log(detail_desain)
detail_desain = list_desain[i].isi_depan;
// console.log(detail_desain)
break;
}
}
$("#sini_div_baju_color").attr("style","background-image: url(assets/img/"+baju_color+".PNG); height: 350px; width: 100%;background-size: 100% 100%;");
$("#sini_div_baju_color").attr("style","background-image: url(assets/img/"+baju_color+"1.JPG); height: 350px; width: 100%;background-size: 100% 100%;");
function toastnya(id,mesej){
toastr.options = {
@ -300,7 +300,10 @@ resizeCanvas();
function desain_belakang(){
console.log(id_desain)
window.location.href ="desain_complete_belakang.html?id="+id_desain;
}
@ -329,4 +332,108 @@ resizeCanvas();
$('#ini_untuk_share').trigger('click');
}, 200);
})
}
}
async function DownloadToDevice() {
$.blockUI({
message: "Sedang Diproses",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
var div = document.getElementById('sini_div_baju_color');
await html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
var base64URL = canvas.toDataURL('image/png');
$.ajax({
url: "http://irwan.kuwakuwi.com/",
type: 'post',
data: {proses : "ambil_gambar" , base64 : base64URL, id : "desain_depan"+id_desain},
beforeSend: function(res) {
},
success: function (response) {
console.log(response);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown)
}
});
})
await sleep(3000);
ambil_foto();
}
function ambil_foto(){
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://irwan.kuwakuwi.com/"+"desain_depan"+id_desain+".png");
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function()
{
blob = xhr.response;//xhr.response is now a blob object
console.log(blob);
var storageLocation = "";
// switch (device.platform) {
// case "Android":
storageLocation = 'file:///storage/emulated/0/';
// break;
// case "iOS":
// storageLocation = cordova.file.documentsDirectory;
// break;
// }
var folderpath = storageLocation + "Download";
var filename = "desain_depan"+id_desain+".png";
var DataBlob = blob;
window.resolveLocalFileSystemURL(folderpath, function(dir) {
dir.getFile(filename, {create:true}, function(file) {
file.createWriter(function(fileWriter) {
fileWriter.write(DataBlob);
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.success("<center>Desain Baju Berhasil Disimpan di Folder <b><i>Download</i></b></center>");
//Download was succesfull
}, function(err){
// failed
console.log(err);
});
});
});
}
xhr.send();
$.unblockUI();
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

447
www/assets/js/desain_3_belakang.js Normal file
View File

@ -0,0 +1,447 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// const download = require("./download");
// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// screen.orientation.lock('potrait');
var i = screen.orientation.lock('portrait');
console.log('Orientation is ' + screen.orientation.type);
}
////// get warna baju //////
function $_GET(param) {
var vars = {};
window.location.href.replace( location.hash, '' ).replace(
/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
function( m, key, value ) { // callback
vars[key] = value !== undefined ? value : '';
}
);
if ( param ) {
return vars[param] ? vars[param] : null;
}
return vars;
}
var id_desain = $_GET('id');
///// end get warna baju ///////
var list_desain = JSON.parse(localStorage.getItem('simpanan'));
function hapus_desain(){
swal({
title: "Yakin ingin Hapus Desain ini?",
text: "Desain akan terhapus permanen dari aplikasi",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((logout) => {
if (logout) {
var list_desain_baru = list_desain.filter(function(item){
return item['id'] != id_desain
// console.log(item)
})
// console.log(JSON.stringify(list_desain_baru))
if (JSON.stringify(list_desain_baru) == '[]') {
// console.log("desain tiada")
localStorage.removeItem('simpanan')
window.location.replace("desain_1.html")
}
else
{
localStorage.setItem('simpanan',JSON.stringify(list_desain_baru))
window.location.replace("desain_1.html")
}
}
});
}
// console.log(list_desain)
var baju_color;
var detail_desain = null;
// console.log(list_desain)
for (var i = 0; i < list_desain.length; i++) {
// console.log(list_desain[i].id);
if (list_desain[i].id == id_desain) {
baju_color = list_desain[i].canvas
detail_desain = list_desain[i].isi_belakang;
// console.log(detail_desain)
break;
}
}
$("#sini_div_baju_color").attr("style","background-image: url(assets/img/"+baju_color+"2.JPG); height: 350px; width: 100%;background-size: 100% 100%;");
function toastnya(id,mesej){
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error("<center>"+mesej+"</center>");
$("#"+id).focus();
}
///// responsive canvas /////
function resizeCanvas() {
const outerCanvasContainer = $('#sini_div_canvas')[0];
const ratio = canvas.getWidth() / canvas.getHeight();
const containerWidth = outerCanvasContainer.clientWidth;
const containerHeight = outerCanvasContainer.clientHeight;
const scale = containerWidth / canvas.getWidth();
const zoom = canvas.getZoom() * scale;
canvas.setDimensions({width: containerWidth, height: outerCanvasContainer.clientHeight});
canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
}
$("#sini_div_canvas").resize(resizeCanvas);
//// end responsive canvas ///
var canvas = this.__canvas = new fabric.Canvas('c',{width: 900,height: 1050});
canvas.renderTop();
resizeCanvas();
if (detail_desain != null) {
for (var i = 0; i < detail_desain.length; ++i) {
// if (detail_desain[i].kategori == 'segi_empat') {
// segi_empat(detail_desain[i].id,detail_desain[i].angle,detail_desain[i].left,detail_desain[i].top,detail_desain[i].fill,detail_desain[i].width,detail_desain[i].heightdetail_desain[i].stroke)
// console.log(detail_desain[i]);
// }
if (detail_desain[i].kategori == "segi_empat") {
// console.log('ada segi empat')
segi_empat(detail_desain[i].id,detail_desain[i].angle,detail_desain[i].left,detail_desain[i].top,detail_desain[i].fill,detail_desain[i].width,detail_desain[i].height,detail_desain[i].stroke)
}
else if (detail_desain[i].kategori == "segi_tiga") {
// console.log('ada segi empat')
segi_tiga(detail_desain[i].id,detail_desain[i].angle,detail_desain[i].left,detail_desain[i].top,detail_desain[i].fill,detail_desain[i].width,detail_desain[i].height,detail_desain[i].stroke)
}
else if (detail_desain[i].kategori == "lingkaran") {
// console.log('ada segi empat')
segi_lingkaran(detail_desain[i].id,detail_desain[i].angle,detail_desain[i].left,detail_desain[i].top,detail_desain[i].fill,detail_desain[i].radius,detail_desain[i].stroke,detail_desain[i].scaleX,detail_desain[i].scaleY)
}
else if (detail_desain[i].kategori == "free_drawing") {
// console.log('ada segi empat')
free_draw(detail_desain[i].id,detail_desain[i].path,detail_desain[i].left,detail_desain[i].top,detail_desain[i].height,detail_desain[i].width,detail_desain[i].stroke_width,detail_desain[i].stroke)
}
else if (detail_desain[i].kategori == "teks") {
// console.log('ada segi empat')
// tambah_teks(id,input,fill,family,top,left,width,height,scaleX,scaleY)
tambah_teks(detail_desain[i].id,detail_desain[i].input_teks,detail_desain[i].fill,detail_desain[i].fontFamily,detail_desain[i].top,detail_desain[i].left,detail_desain[i].width,detail_desain[i].height,detail_desain[i].angle,detail_desain[i].scaleX,detail_desain[i].scaleY)
}
else if (detail_desain[i].kategori == "foto") {
// console.log('ada segi empat')
// add_image(id,base,scaleX,scaleX,left,top,angle)
add_image(detail_desain[i].id,detail_desain[i].detail,detail_desain[i].scaleX,detail_desain[i].scaleY,detail_desain[i].left,detail_desain[i].top,detail_desain[i].angle )
}
}
}
function add_image(id,base,scaleX,scaleY,left,top,angle){
var x = document.createElement("IMG");
x.setAttribute("src", base);
x.setAttribute("id", 'img_yg_terupload_'+id);
x.async = true;
document.getElementById("sini_tampung_image").appendChild(x);
setTimeout(function(){
var imgElement = document.getElementById('img_yg_terupload_'+id);
var imgInstance = new fabric.Image(imgElement, {
id : id,
left: left,
top: top,
angle: angle,
opacity: 1,
scaleX : scaleX,
scaleY : scaleY
});
canvas.add(imgInstance);
}, 200)
}
function segi_empat(id,angle,left,top,fillnya,width,height,stroke) {
var rect = new fabric.Rect({
id : id,
// kategori : bentuk,
angle:angle,
left: left,
top: top,
fill: fillnya,
width: width,
height: height,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
canvas.add(rect);
}
function segi_tiga(id,angle,left,top,fillnya,width,height,stroke) {
var tri = new fabric.Triangle({
id : id,
// kategori : bentuk,
angle:angle,
left: left,
top: top,
fill: fillnya,
width: width,
height: height,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
canvas.add(tri);
}
function segi_lingkaran(id,angle,left,top,fillnya,radius,stroke,scaleX,scaleY) {
var cir = new fabric.Circle({
id : id,
angle:angle,
left: left,
top: top,
fill: fillnya,
radius : radius,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
scaleX : scaleX,
scaleY : scaleY
// padding : 5
});
// console.log(cir);
canvas.add(cir);
}
function free_draw(id,path,top,left,height,width,stroke_width,stroke){
var garis = new fabric.Path(path);
garis.set({
id : id,
fill: null,
// top: top,
// left: left,
// height: height,
// width: width,
strokeWidth: stroke_width,
stroke: stroke
});
canvas.add(garis);
}
function tambah_teks(id,input,fill,family,top,left,width,height,angle,scaleX,scaleY){
var text = new fabric.Text(input, {
id : id,
angle:angle,
fill: fill ,
fontSize: 100,
left: left,
top: top,
width : width,
height : height,
fontFamily: family,
scaleX : scaleX,
scaleY : scaleY
});
console.log(text)
canvas.add(text);
}
function desain_depan(){
console.log(id_desain)
window.location.href ="desain_complete.html?id="+id_desain;
}
function takeshot() {
var div = document.getElementById('sini_div_baju_color');
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
var base64URL = canvas.toDataURL('image/jpeg');
console.log(base64URL)
window.location.href = base64URL;
$("#ini_untuk_share").attr('onclick',"window.plugins.socialsharing.share(null, 'Irwan T-Shirt Design', '"+base64URL+"', null)");
var x = document.createElement("IMG");
x.setAttribute("src", base64URL);
x.setAttribute("id", 'img_yg_terupload_'+id_desain);
x.async = true;
document.getElementById("sini_tampung_image").appendChild(x);
setTimeout(function(){
$('#ini_untuk_share').trigger('click');
}, 200);
})
}
async function DownloadToDevice() {
$.blockUI({
message: "Sedang Diproses",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
var div = document.getElementById('sini_div_baju_color');
await html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
var base64URL = canvas.toDataURL('image/png');
$.ajax({
url: "http://irwan.kuwakuwi.com/",
type: 'post',
data: {proses : "ambil_gambar" , base64 : base64URL, id : "desain_belakang"+id_desain},
beforeSend: function(res) {
},
success: function (response) {
console.log(response);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown)
}
});
})
await sleep(3000);
ambil_foto();
}
function ambil_foto(){
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://irwan.kuwakuwi.com/"+"desain_belakang"+id_desain+".png");
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function()
{
blob = xhr.response;//xhr.response is now a blob object
console.log(blob);
var storageLocation = "";
// switch (device.platform) {
// case "Android":
storageLocation = 'file:///storage/emulated/0/';
// break;
// case "iOS":
// storageLocation = cordova.file.documentsDirectory;
// break;
// }
var folderpath = storageLocation + "Download";
var filename = "desain_belakang"+id_desain+".png";
var DataBlob = blob;
window.resolveLocalFileSystemURL(folderpath, function(dir) {
dir.getFile(filename, {create:true}, function(file) {
file.createWriter(function(fileWriter) {
fileWriter.write(DataBlob);
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.success("<center>Desain Baju Berhasil Disimpan di Folder <b><i>Download</i></b></center>");
//Download was succesfull
}, function(err){
// failed
console.log(err);
});
});
});
}
xhr.send();
$.unblockUI();
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

954
www/assets/js/desain_belakang.js Normal file
View File

@ -0,0 +1,954 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// screen.orientation.lock('potrait');
}
////// get warna baju //////
function $_GET(param) {
var vars = {};
window.location.href.replace( location.hash, '' ).replace(
/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
function( m, key, value ) { // callback
vars[key] = value !== undefined ? value : '';
}
);
if ( param ) {
return vars[param] ? vars[param] : null;
}
return vars;
}
var color = $_GET('color');
var id_baju = $_GET('id');
$("#sini_div_baju_color").attr("style","background-image: url(assets/img/"+color+".JPG); height: 350px; width: 100%;background-size: 100% 100%;");
///// end get warna baju ///////
function toastnya(id,mesej){
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-top-right",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error("<center>"+mesej+"</center>");
$("#"+id).focus();
}
////// ini icon delete //////
var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
var img = document.createElement('img');
img.src = deleteIcon;
//// end icon delete /////
///// responsive canvas /////
function resizeCanvas() {
const outerCanvasContainer = $('#sini_div_canvas')[0];
const ratio = canvas.getWidth() / canvas.getHeight();
const containerWidth = outerCanvasContainer.clientWidth;
const containerHeight = outerCanvasContainer.clientHeight;
const scale = containerWidth / canvas.getWidth();
const zoom = canvas.getZoom() * scale;
canvas.setDimensions({width: containerWidth, height: outerCanvasContainer.clientHeight});
canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
}
$("#sini_div_canvas").resize(resizeCanvas);
//// end responsive canvas ///
var canvas = this.__canvas = new fabric.Canvas('c',{width: 900,
height: 1050});
// var canvas = new fabric.Canvas('c',{backgroundColor : "red"});
// canvas.backgroundColor= color;
canvas.renderTop();
canvas.isDrawingMode = false;
resizeCanvas();
var drawing_width = 1; // ini utk drawing width
var drawing_color = null; // ini utk drawing color
///// ini change div editor /////
function change_editor(e){
if (e == 'bentuk') {
canvas.isDrawingMode = false;
$("#div_upload_image").attr('style','display : none')
var html= '<div class="pacific form-group">'+
'<label>Bentuk</label>'+
'<select class="form-control" onchange="change_persegi(1,value)" id="select_bentuk">'+
'<option disabled="" selected="">-Pilih Bentuk Persegi</option>'+
'<option value="rect">Segi Empat</option>'+
'<option value="tri">Segi Tiga</option>'+
'<option value="cir">Lingkaran</option>'+
'</select>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Fill Color</label>'+
'<select class="form-control" onchange="change_persegi(2,value)">'+
'<option disabled="" selected="">-Fill Color</option>'+
'<option value="no_color">Transparan</option>'+
'<option value="black">Hitam</option>'+
'<option value="white">Putih</option>'+
'<option value="red">Merah</option>'+
'<option value="blue">Biru</option>'+
'<option value="yellow">Kuning</option>'+
'</select>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Stroke Color</label>'+
'<select class="form-control" onchange="change_persegi(3,value)">'+
'<option disabled="" selected="">-Stroke Color</option>'+
'<option value="black">Hitam</option>'+
'<option value="white">Putih</option>'+
'<option value="red">Merah</option>'+
'<option value="blue">Biru</option>'+
'<option value="yellow">Kuning</option>'+
'</select>'+
'</div>'+
// '<div class="form-group">'+
// '<label>Stroke Width</label>'+
// '<input class="form-control" type="range" onchange="change_persegi(4,value)" value="1" min="1" max="20" style="display: block">'+
// '</div>'+
'<div class="pacific form-group" style="text-align:center">'+
'<button onclick="add_bentuk()" class="btn btn-info" style="font-weight: bold;">Tambah Bentuk</button>'
'</div>';
$("#sini_div_editor").html(html)
canvas.isDrawingMode = false;
}
if (e == 'drawing') {
canvas.isDrawingMode = false;
$("#div_upload_image").attr('style','display : none')
drawing_color = null;
drawing_width = 1;
var html= '<div class="pacific form-group">'+
'<label>Drawing Color</label>'+
'<select class="form-control" onchange="free_drawing(1,value)" id="select_drawing_color">'+
'<option disabled="" selected="">-Drawing Color</option>'+
'<option value="black">Hitam</option>'+
'<option value="white">Putih</option>'+
'<option value="red">Merah</option>'+
'<option value="blue">Biru</option>'+
'<option value="yellow">Kuning</option>'+
'</select>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Drawing Width</label>'+
'<input class="form-control" type="range" onchange="free_drawing(2,value)" value="1" min="1" max="20" style="display: block">'+
'</div>'+
'<div class="pacific form-group" style="text-align:center">'+
'<button onclick="add_drawing()" class="btn btn-info" style="font-weight: bold;">Tambah Drawing</button>'
'</div>';
$("#sini_div_editor").html(html)
}
if (e == 'teks') {
canvas.isDrawingMode = false;
$("#div_upload_image").attr('style','display : none')
drawing_color = null;
drawing_width = 1;
var html= '<div class="pacific form-group">'+
'<label>Inputan Teks</label>'+
// '<input class="form-control" type="teks" id="input_teks" oninput="teks_input(1,value)" >'+
'<textarea class="form-control" id="input_teks" oninput="teks_input(1,value)"></textarea>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Teks Font</label>'+
'<select class="form-control" onchange="teks_input(2,value)" id="select_teks_font">'+
'<option disabled="" selected="">-Pilih Teks Font</option>'+
'<option value="Times" style="font-family : Times">Times</option>'+
'<option value="Arial" style="font-family : Arial">Arial</option>'+
'<option value="Metal Mania" style="font-family : Metal Mania">Metal Mania</option>'+
'<option value="Pacifico">Pacifico</option>'+
'</select>'+
'</div>'+
'<div class="pacific form-group">'+
'<label>Teks Color</label>'+
'<input class="form-control" type="color" onchange="teks_input(3,value)" value="black" >'+
'</div>'+
'<div class="pacific form-group" style="text-align:center">'+
'<button onclick="add_teks()" class="btn btn-info" style="font-weight: bold;">Tambah Teks</button>'
'</div>';
$("#sini_div_editor").html(html)
}
if (e == 'image') {
canvas.isDrawingMode = false;
$("#div_upload_image").attr('style','display : block')
image_base64 = null;
$("#sini_div_editor").html(null)
}
}
//// end change div editor ////
var idnya = 1; // ini id tiap object
var save_data = null; // ini data editor
////// render icon delete supaya bole delete //////
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: 16,
cursorStyle: 'pointer',
mouseUpHandler: deleteObject,
render: renderIcon,
cornerSize: 24
});
function deleteObject(eventData, target) {
var datanya = JSON.parse(save_data);
console.log(target);
// datanya.filter(function(item){ console.log(item) })
var myNewArray = datanya.filter(function(item){ return item['id'] != target['id'] })
myNewArray = JSON.stringify(myNewArray)
if (myNewArray == "[]") {
myNewArray = null;
}
save_data = myNewArray
console.log(JSON.parse(save_data));
if (save_data == null) {
$("#save_datanya11").attr('disabled','');
}
var canvas = target.canvas;
canvas.remove(target);
canvas.requestRenderAll();
}
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -size/2, -size/2, size, size);
ctx.restore();
}
////// end render icon delete //////
//// ini untuk bentuk persegi ////
var variable_segi = null;
function change_persegi(kat,nilai){
var segi;
if (variable_segi == null) {
if (kat == 1) {
segi = [{"segi" : nilai ,"fill" : '' , 'stroke' : '' }];
}
else if (kat == 2) {
segi = [{"segi" : '' ,"fill" : nilai , 'stroke' : '' }];
}
else if (kat == 3) {
segi = [{"segi" : '' ,"fill" : '' , 'stroke' : nilai }];
}
variable_segi = JSON.stringify(segi)
}
else
{
// console.log(variable_segi)
variable_segi = JSON.parse(variable_segi);
// console.log(variable_segi)
if (kat == 1) {
variable_segi[0].segi = nilai;
}
else if (kat == 2) {
variable_segi[0].fill = nilai;
}
else if (kat == 3) {
variable_segi[0].stroke = nilai;
}
variable_segi = JSON.stringify(variable_segi)
// console.log(variable_segi)
}
}
function add_bentuk(){
if (variable_segi == null) {
toastnya('select_bentuk','Bentuk Harus Terpilih');
}
else
{
var segi = JSON.parse(variable_segi);
if (segi[0].segi == '' || segi[0].segi == null || segi[0].fill == '' || segi[0].fill == null || segi[0].stroke == '' || segi[0].stroke == null ) {
toastnya('select_bentuk','Semua Pilihan Harus DIpilih');
}
else
{
var fillnya;
if (segi[0].fill == 'no_color') {
fillnya = 'rgba(0,0,0,0)'
}
else
{
fillnya = segi[0].fill
}
if (segi[0].segi == 'rect') {
segi_empat(fillnya,segi[0].stroke,'segi_empat');
// console.log(segi[0].stroke_width)
}
else if (segi[0].segi == 'tri') {
segi_tiga(fillnya,segi[0].stroke,'segi_tiga');
// console.log(segi[0].stroke_width)
}
else if (segi[0].segi == 'cir') {
segi_lingkaran(fillnya,segi[0].stroke,'lingkaran');
// console.log(segi[0].stroke_width)
}
// variable_segi = null;
// $("#sini_div_editor").html(null)
document.getElementById("back_to_top").click();
// $("#editor_select").val($("#editor_select option:first").val());
}
}
}
function segi_empat(fillnya,stroke,bentuk) {
var rect = new fabric.Rect({
id : idnya,
kategori : bentuk,
angle:0,
left: 400,
top: 350,
fill: fillnya,
width: 200,
height: 200,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
var datanya = [{"id" : idnya ,"kategori" : bentuk, "left" : 400 , "top" : 350, "width" : 200 , "height" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
canvas.add(rect);
canvas.setActiveObject(rect);
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
}
function segi_tiga(fillnya,stroke,bentuk) {
var tri = new fabric.Triangle({
id : idnya,
kategori : bentuk,
angle:0,
left: 400,
top: 350,
fill: fillnya,
width: 200,
height: 200,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
var datanya = [{"id" : idnya ,"kategori" : bentuk, "left" : 400 , "top" : 350, "width" : 200 , "height" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
canvas.add(tri);
canvas.setActiveObject(tri);
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
}
function segi_lingkaran(fillnya,stroke,bentuk) {
var cir = new fabric.Circle({
id : idnya,
kategori : bentuk,
angle:0,
left: 400,
top: 350,
fill: fillnya,
radius : 200,
// objectCaching: true,
stroke: stroke,
strokeWidth: 10,
// padding : 5
});
var datanya = [{"id" : idnya ,"kategori" : bentuk, "left" : 400 , "top" : 350, "radius" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke , "scaleX" : 1, "scaleY" : 1}];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
console.log(cir);
canvas.add(cir);
canvas.setActiveObject(cir);
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
}
//// end untuk bentuk persegi ////
//// ini untuk free drawing ////
function free_drawing(kat,nilai){
// console.log(kat,nilai)
var draw;
if (kat == 1) {
drawing_color = nilai;
}
else if (kat == 2) {
drawing_width = nilai;
}
}
function add_drawing(){
// console.log(variable_free_drawing)
if (drawing_color == null) {
toastnya('select_drawing_color','Warna Harus Dipilih');
}
else
{
// console.log("jalankan")
// drawing = JSON.parse(variable_free_drawing)
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = drawing_width;
canvas.freeDrawingBrush.color = drawing_color;
// variable_segi = null;
var html = '<div class="pacific form-group" style="text-align:center">'+
'<button onclick="stop_drawing()" class="btn btn-warning" style="font-weight: bold;">Stop Drawing</button>'
'</div>';
$("#sini_div_editor").html(html)
document.getElementById("back_to_top").click();
$("#editor_select").val($("#editor_select option:first").val());
}
}
canvas.on('path:created', function(opt) {
// opt.path is a fabric.Path ready to use and already on the canvas
// console.log(opt.path instanceof fabric.Path)
// this is the path data
// console.log(opt.path);
// console.log(JSON.stringify(opt.path.path));
var path = opt.path.path.map(chunk => {return chunk.join(' ');}).join(' ');
// console.log(opt.path.height)
console.log(opt.path)
var datanya = [{"id" : idnya ,"kategori" : 'free_drawing', "path" : path , "left" : opt.path.left , "top" : opt.path.top, "width" : opt.path.width , "height" : opt.path.height , "stroke_width" : opt.path.strokeWidth , "stroke" : opt.path.stroke }];
console.log(datanya)
opt.path.idnya = fabric.Object.__uid++
opt.path.id = idnya
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
console.log(save_data)
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
console.log(save_data)
}
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
});
function stop_drawing(){
canvas.isDrawingMode = false;
$("#sini_div_editor").html(null)
document.getElementById("back_to_top").click();
}
// function hapus_path() {
// canvas.getObjects('path').forEach((path) => {
// // if(path.senderId === client.id){
// canvas.remove(path);
// // }
// });
// }
//// end utk free drawing ////
//// ini utk input teks ////
var teks_inputan = null;
var teks_font = null;
var teks_color = "black";
function teks_input(kat,nilai){
// console.log(kat,nilai)
if (kat == 1) {
teks_inputan = nilai;
}
else if (kat == 2) {
teks_font = nilai;
// console.log(teks_font)
}
else if (kat == 3) {
teks_color = nilai;
}
}
function add_teks(){
// console.log(variable_free_drawing)
if (teks_inputan == null) {
toastnya('input_teks','Inputan Harus Terisi');
}
else if (teks_font == null) {
toastnya('select_teks_font','Font Harus Terpilih');
}
else
{
tambah_teks(teks_inputan,teks_color,teks_font)
document.getElementById("back_to_top").click();
}
}
function tambah_teks(input,fill,family){
var text = new fabric.Text(input, {
id : idnya,
fill: fill ,
fontSize: 100,
left: 400,
top: 350,
fontFamily: family,
});
var datanya = [{"id" : idnya ,"kategori" : "teks", "input_teks" : input, "left" : 400 , "top" : 350, "width" : "" , "height" : "200" , "angle" :0 , "fill" : fill , "fontFamily" : family , "angle" : 0 , "scaleX" : 1, "scaleY" : 1}];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
// text
// Render the Text on Canvas
// console.log(text.kategori);
text.kategori = "teks"
console.log(text)
canvas.add(text);
canvas.setActiveObject(text);
idnya = idnya + 1;
$("#save_datanya11").removeAttr('disabled');
}
//// end utk input teks ////
//// ini utk upload image ////
var image_base64 = null;
$("#input_upload_image").change(function(){
readImage( this );
// console.log("berubah")
// console.log(image_base64)
});
function readImage(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
var size = input.files[0].size / 1024
var type = input.files[0].type;
// console.log(size)
console.log(type)
if (size > 1500) {
toastnya("input_upload_image","Image yang diupload maksimal 1,4 MB")
$("#input_upload_image").val(null)
image_base64 = null
}
else if (type != 'image/jpeg' && type != 'image/png') {
toastnya("input_upload_image","File yang diupload harus berekstensi foto")
$("#input_upload_image").val(null)
image_base64 = null
}
else
{
FR.onload = function(e) {
// $('#img').attr( "src", e.target.result );
// $('#base').text( e.target.result );
// console.log(e.target.result)
// simpan_image(e.target.result)
image_base64 = e.target.result
};
FR.readAsDataURL( input.files[0] );
}
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function add_image(){
var x = document.createElement("IMG");
x.setAttribute("src", image_base64);
x.setAttribute("id", 'img_yg_terupload_'+idnya);
x.async = true;
document.getElementById("sini_tampung_image").appendChild(x);
// await sleep(500);
setTimeout(function(){
console.log("heheheh dulu")
var imgElement = document.getElementById('img_yg_terupload_'+idnya);
var imgInstance = new fabric.Image(imgElement, {
id : idnya,
left: 400,
top: 350,
angle: 0,
opacity: 1
});
imgInstance.kategori = "foto"
canvas.add(imgInstance);
canvas.setActiveObject(imgInstance);
var datanya = [{"id" : idnya ,"kategori" : "foto", "detail" : image_base64, "scaleX" : 1 , "scaleY" : 1 , "left" : 400 , "top" : 350, "angle" :0 }];
if (save_data == null) {
datanya = JSON.stringify(datanya);
save_data = datanya;
// console.log(JSON.parse(save_data))
}
else
{
save_data = JSON.parse(save_data);
save_data = save_data.concat(datanya)
save_data = JSON.stringify(save_data);
// console.log(JSON.parse(save_data))
// console.log(save_data)
}
idnya = idnya + 1;
document.getElementById("back_to_top").click();
$("#save_datanya11").removeAttr('disabled');
}, 200);
}
// function try_remove(){
// document.getElementById("img_yg_terupload_1").remove();
// // var elem = document.getElementById(id);
// }
//// end utk upload image ////
//// sini canvas event /////
canvas.on('object:moved', function(options) {
// console.log(options)
var obj = canvas.getActiveObject();
var datanya = JSON.parse(save_data);
var id;
for (var i = 0; i < datanya.length; ++i) {
if (datanya[i].id == options['target']['id']) {
id = i;
break;
}
}
if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' ) {
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
if (options['target']['kategori'] == 'foto' || options['target']['kategori'] == 'teks' || options['target']['kategori'] == 'lingkaran' ) {
// console.log(options['target'])
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].scaleY = options['target']['scaleY'];
datanya[id].scaleX = options['target']['scaleX'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
save_data = JSON.stringify(datanya);
// console.log(JSON.parse(save_data) )
// console.log(save_data)
// console.log(options['target']['kategori'])
// simpan(datanya,'update',kategori,id);
});
canvas.on('object:rotated', function(options) {
// console.log(options)
var obj = canvas.getActiveObject();
var datanya = JSON.parse(save_data);
var id;
for (var i = 0; i < datanya.length; ++i) {
if (datanya[i].id == options['target']['id']) {
id = i;
break;
}
}
if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' ) {
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
if (options['target']['kategori'] == 'foto' || options['target']['kategori'] == 'teks' || options['target']['kategori'] == 'lingkaran' ) {
// console.log(options['target'])
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].scaleY = options['target']['scaleY'];
datanya[id].scaleX = options['target']['scaleX'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
save_data = JSON.stringify(datanya);
// console.log(JSON.parse(save_data) )
console.log(save_data)
});
canvas.on('object:scaled', function(options) {
console.log(options)
var obj = canvas.getActiveObject();
var datanya = JSON.parse(save_data);
var id;
for (var i = 0; i < datanya.length; ++i) {
if (datanya[i].id == options['target']['id']) {
id = i;
break;
}
}
if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' ) {
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
if (options['target']['kategori'] == 'foto' || options['target']['kategori'] == 'teks' || options['target']['kategori'] == 'lingkaran' ) {
// console.log(options['target'])
datanya[id].angle = options['target']['angle'];
datanya[id].height = Math.floor(obj.getScaledHeight());
datanya[id].left = options['target']['left'];
datanya[id].top = options['target']['top'];
datanya[id].scaleY = options['target']['scaleY'];
datanya[id].scaleX = options['target']['scaleX'];
datanya[id].width = Math.floor(obj.getScaledWidth());
}
// console.log(save_data)
save_data = JSON.stringify(datanya);
// console.log(JSON.parse(save_data) )
console.log(save_data)
});
canvas.on('selection:created', function(options) {
// console.log(options['target'])
if (options['target']['strokeLineCap'] == 'round' && options['target']['strokeLineJoin'] == 'round') {
// console.log('ini free drawing')
var id = options['target']['idnya']
// console.log("ini idnya : "+id)
var ini_array;
// console.log(canvas['_objects'])
var object_canvas = canvas['_objects'];
for (var i = 0; i < object_canvas.length; i++) {
// console.log(object_canvas[i].idnya)
if (object_canvas[i].idnya == options['target']['idnya']) {
ini_array = i;
break;
}
}
// console.log("ini id array nya : "+ini_array)
canvas['_objects'][ini_array].lockScalingX = true;
canvas['_objects'][ini_array].lockScalingY = true;
canvas['_objects'][ini_array].lockRotation = true;
canvas['_objects'][ini_array].lockMovementX = true;
canvas['_objects'][ini_array].lockMovementY = true;
// this.__canvases.push(canvas);
}
});
canvas.on('selection:updated', function(options) {
// console.log(options['target'])
// console.log(options)
if (options['target']['strokeLineCap'] == 'round' && options['target']['strokeLineJoin'] == 'round') {
// console.log('ini free drawing')
var id = options['target']['idnya']
// console.log("ini idnya : "+id)
var ini_array;
// console.log(canvas['_objects'])
var object_canvas = canvas['_objects'];
for (var i = 0; i < object_canvas.length; i++) {
// console.log(object_canvas[i].idnya)
if (object_canvas[i].idnya == options['target']['idnya']) {
ini_array = i;
break;
}
}
// console.log("ini id array nya : "+ini_array)
canvas['_objects'][ini_array].lockScalingX = true;
canvas['_objects'][ini_array].lockScalingY = true;
canvas['_objects'][ini_array].lockRotation = true;
canvas['_objects'][ini_array].lockMovementX = true;
canvas['_objects'][ini_array].lockMovementY = true;
// this.__canvases.push(canvas);
}
});
//// end canvas event /////
function save_desain() {
var penyimpanan = JSON.parse(localStorage.getItem('simpanan'))
var a = JSON.parse(save_data);
var coba2 = null
// console.log(penyimpanan);
for (let i = 0; i < penyimpanan.length; i++) {
if (penyimpanan[i].id == id_baju) {
// console.log(penyimpanan[i])
penyimpanan[i].isi_belakang = a;
}
}
// console.log(coba2.push('hehe'));
// console.log(penyimpanan)
// if (penyimpanan == null) {
// var ini = [{"id" : id ,"canvas" : color ,"isi_depan" : a, "isi_belakang" : null}];
// // localStorage.setItem('coba2', JSON.stringify(ini));
// }
// else
// {
// id = JSON.parse(penyimpanan);
// id = id[id.length-1].id + 1
// var ini = [{"id" : id ,"canvas" : color ,"isi" : a, "isi_belakang" : null}];
// penyimpanan = JSON.parse(penyimpanan)
// ini = penyimpanan.concat(ini);
// // localStorage.setItem('coba2', JSON.stringify(ini));
// }
localStorage.setItem('simpanan', JSON.stringify(penyimpanan));
window.location.replace("desain_complete.html?id="+id_baju);
// window.location.replace("desain_belakang.html?color="+color+"&id="+id);
}
function cek_simpanan(){
// localStorage.removeItem('simpanan')
// alert(localStorage.getItem('coba2'))
console.log(JSON.parse(localStorage.getItem('simpanan')))
}

162
www/assets/js/download.js Normal file
View File

@ -0,0 +1,162 @@
//download.js v4.2, by dandavis; 2008-2016. [CCBY2] see http://danml.com/download.html for tests/usage
// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
// v4 adds AMD/UMD, commonJS, and plain browser support
// v4.1 adds url download capability via solo URL argument (same domain/CORS only)
// v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
// https://github.com/rndme/download
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.download = factory();
}
}(this, function () {
return function download(data, strFileName, strMimeType) {
var self = window, // this script is only for browsers anyway...
defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
mimeType = strMimeType || defaultMime,
payload = data,
url = !strFileName && !strMimeType && payload,
anchor = document.createElement("a"),
toString = function(a){return String(a);},
myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
fileName = strFileName || "download",
blob,
reader;
myBlob= myBlob.call ? myBlob.bind(self) : Blob ;
if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
payload=[payload, mimeType];
mimeType=payload[0];
payload=payload[1];
}
if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument
fileName = url.split("/").pop().split("?")[0];
anchor.href = url; // assign href prop to temp anchor
if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:
var ajax=new XMLHttpRequest();
ajax.open( "GET", url, true);
ajax.responseType = 'blob';
ajax.onload= function(e){
download(e.target.response, fileName, defaultMime);
};
setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
return ajax;
} // end if valid url?
} // end if url?
//go ahead and download dataURLs right away
if(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){
if(payload.length > (1024*1024*1.999) && myBlob !== toString ){
payload=dataUrlToBlob(payload);
mimeType=payload.type || defaultMime;
}else{
return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs:
navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
saver(payload) ; // everyone else can save dataURLs un-processed
}
}//end if dataURL passed?
blob = payload instanceof myBlob ?
payload :
new myBlob([payload], {type: mimeType}) ;
function dataUrlToBlob(strUrl) {
var parts= strUrl.split(/[:;,]/),
type= parts[1],
decoder= parts[2] == "base64" ? atob : decodeURIComponent,
binData= decoder( parts.pop() ),
mx= binData.length,
i= 0,
uiArr= new Uint8Array(mx);
for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);
return new myBlob([uiArr], {type: type});
}
function saver(url, winMode){
if ('download' in anchor) { //html5 A[download]
anchor.href = url;
anchor.setAttribute("download", fileName);
anchor.className = "download-js-link";
anchor.innerHTML = "downloading...";
anchor.style.display = "none";
document.body.appendChild(anchor);
setTimeout(function() {
anchor.click();
document.body.removeChild(anchor);
if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}
}, 66);
return true;
}
// handle non-a[download] safari as best we can:
if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
if(!window.open(url)){ // popup blocked, offer direct download:
if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }
}
return true;
}
//do iframe dataURL download (old ch+FF):
var f = document.createElement("iframe");
document.body.appendChild(f);
if(!winMode){ // force a mime that will download:
url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
}
f.src=url;
setTimeout(function(){ document.body.removeChild(f); }, 333);
}//end saver
if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
return navigator.msSaveBlob(blob, fileName);
}
if(self.URL){ // simple fast and modern way using Blob and URL:
saver(self.URL.createObjectURL(blob), true);
}else{
// handle non-Blob()+non-URL browsers:
if(typeof blob === "string" || blob.constructor===toString ){
try{
return saver( "data:" + mimeType + ";base64," + self.btoa(blob) );
}catch(y){
return saver( "data:" + mimeType + "," + encodeURIComponent(blob) );
}
}
// Blob but not URL support:
reader=new FileReader();
reader.onload=function(e){
saver(this.result);
};
reader.readAsDataURL(blob);
}
return true;
}; /* end download() */
}));