|
|
|
@ -1,7 +1,15 @@
|
|
|
|
|
import { Component, OnInit, OnDestroy } from '@angular/core';
|
|
|
|
|
import { Router } from '@angular/router';
|
|
|
|
|
|
|
|
|
|
import * as html2canvas from 'html2canvas';
|
|
|
|
|
// import * as Canvas2Ime from '../../../../../node_modules/canvas2image/canvas2image.js';
|
|
|
|
|
// const Canvas2Image = require('canvas2image');
|
|
|
|
|
// const { CAN } = Canvas2Image;
|
|
|
|
|
// import 'canvas2image';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// import * as $ from 'jquery';
|
|
|
|
|
// import $ from 'jquery';
|
|
|
|
|
import { Observable } from 'rxjs/Observable';
|
|
|
|
|
|
|
|
|
|
import { OperationCommerciale } from '../../../../models/OperationCommerciale';
|
|
|
|
@ -12,8 +20,15 @@ import { AngularFireAuth } from 'angularfire2/auth';
|
|
|
|
|
import { AuthService } from '../../../services/auth/auth.service';
|
|
|
|
|
import { OpCommercialService } from '../../../services/opCommercial/op-commercial.service';
|
|
|
|
|
import { Commercant } from '../../../../models/Commercant';
|
|
|
|
|
import { Image } from '../../../../models/Image';
|
|
|
|
|
/*require('jsdom').env('', function(err, window) {
|
|
|
|
|
if (err) {
|
|
|
|
|
console.error(err);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var $ = require('jquery')(window);
|
|
|
|
|
});*/
|
|
|
|
|
//import { Image } from '../../../../models/Image';
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'app-op-commercial',
|
|
|
|
|
templateUrl: './op-commercial.component.html',
|
|
|
|
@ -25,13 +40,13 @@ export class OpCommercialComponent implements OnInit, OnDestroy {
|
|
|
|
|
user: Observable<firebase.User>;
|
|
|
|
|
opCommData: FirebaseListObservable<any[]>;
|
|
|
|
|
profileData: FirebaseListObservable<any[]>;
|
|
|
|
|
// Cas2Image: Observable<Canvas2Image>;
|
|
|
|
|
commercant: Commercant;
|
|
|
|
|
constructor(public afAuth: AngularFireAuth, public afDb: AngularFireDatabase,
|
|
|
|
|
private router: Router, private authService: AuthService, private opComService: OpCommercialService) {
|
|
|
|
|
this.opComm = new OperationCommerciale();
|
|
|
|
|
|
|
|
|
|
this.user = afAuth.authState;
|
|
|
|
|
|
|
|
|
|
this.commercant = new Commercant();
|
|
|
|
|
this.user.subscribe(
|
|
|
|
|
(auth) => {
|
|
|
|
@ -71,12 +86,376 @@ export class OpCommercialComponent implements OnInit, OnDestroy {
|
|
|
|
|
goToEnCart(idOp) {
|
|
|
|
|
this.router.navigate(['/EnvoyerCarte', idOp]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
sectionToImage() {
|
|
|
|
|
goToScanCart(idOp) {
|
|
|
|
|
this.router.navigate(['/scannerCarte', idOp]);
|
|
|
|
|
}
|
|
|
|
|
goToDebiterCart(idOp) {
|
|
|
|
|
this.router.navigate(['/debiterCarte', idOp]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
sectionToImage(monURL: string) {
|
|
|
|
|
/**
|
|
|
|
|
* covert canvas to image
|
|
|
|
|
* and save the image file
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
var Canvas2Image = function () {
|
|
|
|
|
|
|
|
|
|
// check if support sth.
|
|
|
|
|
var $support = function () {
|
|
|
|
|
var canvas = document.createElement('canvas'),
|
|
|
|
|
ctx = canvas.getContext('2d');
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
canvas: !!ctx,
|
|
|
|
|
imageData: !!ctx.getImageData,
|
|
|
|
|
dataURL: !!canvas.toDataURL,
|
|
|
|
|
btoa: !!window.btoa
|
|
|
|
|
};
|
|
|
|
|
}();
|
|
|
|
|
|
|
|
|
|
var downloadMime = 'image/png';
|
|
|
|
|
|
|
|
|
|
function scaleCanvas (canvas, width, height) {
|
|
|
|
|
var w = canvas.width,
|
|
|
|
|
h = canvas.height;
|
|
|
|
|
if (width == undefined) {
|
|
|
|
|
width = w;
|
|
|
|
|
}
|
|
|
|
|
if (height == undefined) {
|
|
|
|
|
height = h;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var retCanvas = document.createElement('canvas');
|
|
|
|
|
var retCtx = retCanvas.getContext('2d');
|
|
|
|
|
retCanvas.width = width;
|
|
|
|
|
retCanvas.height = height;
|
|
|
|
|
retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
|
|
|
|
|
return retCanvas;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getDataURL (canvas, type, width, height) {
|
|
|
|
|
canvas = scaleCanvas(canvas, width, height);
|
|
|
|
|
return canvas.toDataURL(type);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function saveFile (strData) {
|
|
|
|
|
document.location.href = strData;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function genImage(strData) {
|
|
|
|
|
var img = document.createElement('img');
|
|
|
|
|
img.src = strData;
|
|
|
|
|
return img;
|
|
|
|
|
}
|
|
|
|
|
function fixType (type) {
|
|
|
|
|
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
|
|
|
|
|
var r = type.match(/png|jpeg|bmp|gif/)[0];
|
|
|
|
|
return 'image/' + r;
|
|
|
|
|
}
|
|
|
|
|
function encodeData (data) {
|
|
|
|
|
if (!window.btoa) { throw 'btoa undefined' }
|
|
|
|
|
var str = '';
|
|
|
|
|
if (typeof data == 'string') {
|
|
|
|
|
str = data;
|
|
|
|
|
} else {
|
|
|
|
|
for (var i = 0; i < data.length; i ++) {
|
|
|
|
|
str += String.fromCharCode(data[i]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return btoa(str);
|
|
|
|
|
}
|
|
|
|
|
function getImageData (canvas) {
|
|
|
|
|
var w = canvas.width,
|
|
|
|
|
h = canvas.height;
|
|
|
|
|
return canvas.getContext('2d').getImageData(0, 0, w, h);
|
|
|
|
|
}
|
|
|
|
|
function makeURI (strData, type) {
|
|
|
|
|
return 'data:' + type + ';base64,' + strData;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* create bitmap image
|
|
|
|
|
* 按照规则生成图片响应头和响应体
|
|
|
|
|
*/
|
|
|
|
|
var genBitmapImage = function (oData) {
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx
|
|
|
|
|
// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx
|
|
|
|
|
//
|
|
|
|
|
|
|
|
|
|
var biWidth = oData.width;
|
|
|
|
|
var biHeight = oData.height;
|
|
|
|
|
var biSizeImage = biWidth * biHeight * 3;
|
|
|
|
|
var bfSize = biSizeImage + 54; // total header size = 54 bytes
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
// typedef struct tagBITMAPFILEHEADER {
|
|
|
|
|
// WORD bfType;
|
|
|
|
|
// DWORD bfSize;
|
|
|
|
|
// WORD bfReserved1;
|
|
|
|
|
// WORD bfReserved2;
|
|
|
|
|
// DWORD bfOffBits;
|
|
|
|
|
// } BITMAPFILEHEADER;
|
|
|
|
|
//
|
|
|
|
|
var BITMAPFILEHEADER = [
|
|
|
|
|
// WORD bfType -- The file type signature; must be "BM"
|
|
|
|
|
0x42, 0x4D,
|
|
|
|
|
// DWORD bfSize -- The size, in bytes, of the bitmap file
|
|
|
|
|
bfSize & 0xff, bfSize >> 8 & 0xff, bfSize >> 16 & 0xff, bfSize >> 24 & 0xff,
|
|
|
|
|
// WORD bfReserved1 -- Reserved; must be zero
|
|
|
|
|
0, 0,
|
|
|
|
|
// WORD bfReserved2 -- Reserved; must be zero
|
|
|
|
|
0, 0,
|
|
|
|
|
// DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.
|
|
|
|
|
54, 0, 0, 0
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
// typedef struct tagBITMAPINFOHEADER {
|
|
|
|
|
// DWORD biSize;
|
|
|
|
|
// LONG biWidth;
|
|
|
|
|
// LONG biHeight;
|
|
|
|
|
// WORD biPlanes;
|
|
|
|
|
// WORD biBitCount;
|
|
|
|
|
// DWORD biCompression;
|
|
|
|
|
// DWORD biSizeImage;
|
|
|
|
|
// LONG biXPelsPerMeter;
|
|
|
|
|
// LONG biYPelsPerMeter;
|
|
|
|
|
// DWORD biClrUsed;
|
|
|
|
|
// DWORD biClrImportant;
|
|
|
|
|
// } BITMAPINFOHEADER, *PBITMAPINFOHEADER;
|
|
|
|
|
//
|
|
|
|
|
var BITMAPINFOHEADER = [
|
|
|
|
|
// DWORD biSize -- The number of bytes required by the structure
|
|
|
|
|
40, 0, 0, 0,
|
|
|
|
|
// LONG biWidth -- The width of the bitmap, in pixels
|
|
|
|
|
biWidth & 0xff, biWidth >> 8 & 0xff, biWidth >> 16 & 0xff, biWidth >> 24 & 0xff,
|
|
|
|
|
// LONG biHeight -- The height of the bitmap, in pixels
|
|
|
|
|
biHeight & 0xff, biHeight >> 8 & 0xff, biHeight >> 16 & 0xff, biHeight >> 24 & 0xff,
|
|
|
|
|
// WORD biPlanes -- The number of planes for the target device. This value must be set to 1
|
|
|
|
|
1, 0,
|
|
|
|
|
// WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap
|
|
|
|
|
// has a maximum of 2^24 colors (16777216, Truecolor)
|
|
|
|
|
24, 0,
|
|
|
|
|
// DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed
|
|
|
|
|
0, 0, 0, 0,
|
|
|
|
|
// DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmaps
|
|
|
|
|
biSizeImage & 0xff, biSizeImage >> 8 & 0xff, biSizeImage >> 16 & 0xff, biSizeImage >> 24 & 0xff,
|
|
|
|
|
// LONG biXPelsPerMeter, unused
|
|
|
|
|
0,0,0,0,
|
|
|
|
|
// LONG biYPelsPerMeter, unused
|
|
|
|
|
0,0,0,0,
|
|
|
|
|
// DWORD biClrUsed, the number of color indexes of palette, unused
|
|
|
|
|
0,0,0,0,
|
|
|
|
|
// DWORD biClrImportant, unused
|
|
|
|
|
0,0,0,0
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var iPadding = (4 - ((biWidth * 3) % 4)) % 4;
|
|
|
|
|
|
|
|
|
|
var aImgData = oData.data;
|
|
|
|
|
|
|
|
|
|
var strPixelData = '';
|
|
|
|
|
var biWidth4 = biWidth<<2;
|
|
|
|
|
var y = biHeight;
|
|
|
|
|
var fromCharCode = String.fromCharCode;
|
|
|
|
|
|
|
|
|
|
do {
|
|
|
|
|
var iOffsetY = biWidth4*(y-1);
|
|
|
|
|
var strPixelRow = '';
|
|
|
|
|
for (var x = 0; x < biWidth; x++) {
|
|
|
|
|
var iOffsetX = x<<2;
|
|
|
|
|
strPixelRow += fromCharCode(aImgData[iOffsetY+iOffsetX+2]) +
|
|
|
|
|
fromCharCode(aImgData[iOffsetY+iOffsetX+1]) +
|
|
|
|
|
fromCharCode(aImgData[iOffsetY+iOffsetX]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (var c = 0; c < iPadding; c++) {
|
|
|
|
|
strPixelRow += String.fromCharCode(0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
strPixelData += strPixelRow;
|
|
|
|
|
} while (--y);
|
|
|
|
|
|
|
|
|
|
var strEncoded = encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) + encodeData(strPixelData);
|
|
|
|
|
|
|
|
|
|
return strEncoded;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* saveAsImage
|
|
|
|
|
* @param canvasElement
|
|
|
|
|
* @param {String} image type
|
|
|
|
|
* @param {Number} [optional] png width
|
|
|
|
|
* @param {Number} [optional] png height
|
|
|
|
|
*/
|
|
|
|
|
var saveAsImage = function (canvas, width, height, type) {
|
|
|
|
|
if ($support.canvas && $support.dataURL) {
|
|
|
|
|
if (typeof canvas == "string") { canvas = document.getElementById(canvas); }
|
|
|
|
|
if (type == undefined) { type = 'png'; }
|
|
|
|
|
type = fixType(type);
|
|
|
|
|
if (/bmp/.test(type)) {
|
|
|
|
|
var data = getImageData(scaleCanvas(canvas, width, height));
|
|
|
|
|
var strData = '';
|
|
|
|
|
strData = genBitmapImage(data);
|
|
|
|
|
saveFile(makeURI(strData, downloadMime));
|
|
|
|
|
} else {
|
|
|
|
|
var strData = '';
|
|
|
|
|
strData = getDataURL(canvas, type, width, height);
|
|
|
|
|
saveFile(strData.replace(type, downloadMime));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var convertToImage = function (canvas, width, height, type) {
|
|
|
|
|
if ($support.canvas && $support.dataURL) {
|
|
|
|
|
if (typeof canvas == "string") { canvas = document.getElementById(canvas); }
|
|
|
|
|
if (type == undefined) { type = 'png'; }
|
|
|
|
|
type = fixType(type);
|
|
|
|
|
|
|
|
|
|
if (/bmp/.test(type)) {
|
|
|
|
|
var data = getImageData(scaleCanvas(canvas, width, height));
|
|
|
|
|
var strData = '';
|
|
|
|
|
strData = genBitmapImage(data);
|
|
|
|
|
return genImage(makeURI(strData, 'image/bmp'));
|
|
|
|
|
} else {
|
|
|
|
|
var strData = '';
|
|
|
|
|
strData = getDataURL(canvas, type, width, height);
|
|
|
|
|
return genImage(strData);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
saveAsImage: saveAsImage,
|
|
|
|
|
saveAsPNG: function (canvas, width, height) {
|
|
|
|
|
return saveAsImage(canvas, width, height, 'png');
|
|
|
|
|
},
|
|
|
|
|
saveAsJPEG: function (canvas, width, height) {
|
|
|
|
|
return saveAsImage(canvas, width, height, 'jpeg');
|
|
|
|
|
},
|
|
|
|
|
saveAsGIF: function (canvas, width, height) {
|
|
|
|
|
return saveAsImage(canvas, width, height, 'gif');
|
|
|
|
|
},
|
|
|
|
|
saveAsBMP: function (canvas, width, height) {
|
|
|
|
|
return saveAsImage(canvas, width, height, 'bmp');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
convertToImage: convertToImage,
|
|
|
|
|
convertToPNG: function (canvas, width, height) {
|
|
|
|
|
return convertToImage(canvas, width, height, 'png');
|
|
|
|
|
},
|
|
|
|
|
convertToJPEG: function (canvas, width, height) {
|
|
|
|
|
return convertToImage(canvas, width, height, 'jpeg');
|
|
|
|
|
},
|
|
|
|
|
convertToGIF: function (canvas, width, height) {
|
|
|
|
|
return convertToImage(canvas, width, height, 'gif');
|
|
|
|
|
},
|
|
|
|
|
convertToBMP: function (canvas, width, height) {
|
|
|
|
|
return convertToImage(canvas, width, height, 'bmp');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
}();
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
html2canvas(document.body).then(canvas => {
|
|
|
|
|
var imgData = canvas.toDataURL("image/png");
|
|
|
|
|
var context = canvas.getContext('2d');
|
|
|
|
|
console.log(imgData);
|
|
|
|
|
window.open(imgData);
|
|
|
|
|
// this.AddImagesResource(imgData);
|
|
|
|
|
// document.body.appendChild(canvas);
|
|
|
|
|
});*/
|
|
|
|
|
|
|
|
|
|
html2canvas(document.getElementById('subCard1'), {
|
|
|
|
|
allowTaint: true,
|
|
|
|
|
useCORS: true,
|
|
|
|
|
logging: true,
|
|
|
|
|
onrendered: function(canvas) {
|
|
|
|
|
var context = canvas.getContext('2d');
|
|
|
|
|
var img = new Image();
|
|
|
|
|
|
|
|
|
|
var offsets = document.getElementById('subCard1').getBoundingClientRect();
|
|
|
|
|
var imgTop = offsets.top;
|
|
|
|
|
var imgLeft = offsets.left;
|
|
|
|
|
|
|
|
|
|
//var offsetsContainer = document.getElementById('subCard1').getBoundingClientRect();
|
|
|
|
|
|
|
|
|
|
//var imageLeft = imgLeft - offsetsContainer.left;
|
|
|
|
|
//var imageTop = imgTop - offsetsContainer.top;
|
|
|
|
|
img.src = monURL; // document.getElementById('myimage').getAttribute('src');
|
|
|
|
|
|
|
|
|
|
img.onload = function() {
|
|
|
|
|
context.drawImage(img, imgLeft, imgTop);
|
|
|
|
|
};
|
|
|
|
|
document.body.appendChild(canvas);
|
|
|
|
|
Canvas2Image.saveAsPNG(canvas, 50, 1000);
|
|
|
|
|
// window.open(canvas.toDataURL('image/png'));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
/*
|
|
|
|
|
$(function() {
|
|
|
|
|
$('#btnSave').click(function() {
|
|
|
|
|
html2canvas($('#widget'), {
|
|
|
|
|
onrendered: function(canvas) {
|
|
|
|
|
var context = canvas.getContext('2d'); // returns the 2d context object
|
|
|
|
|
var img = new Image(); // creates a variable for a new image
|
|
|
|
|
var offsets = document.getElementById('myimage').getBoundingClientRect();
|
|
|
|
|
var imgTop = offsets.top;
|
|
|
|
|
var imgLeft = offsets.left;
|
|
|
|
|
|
|
|
|
|
// Find actual position with parent cotainer
|
|
|
|
|
var offsetsContainer = document.getElementById('widget').getBoundingClientRect();
|
|
|
|
|
var imageLeft = imgLeft - offsetsContainer.left;
|
|
|
|
|
var imageTop = imgTop - offsetsContainer.top;
|
|
|
|
|
|
|
|
|
|
img.src = 'http://www.vulgaris-medical.com/sites/default/files/styles/big-lightbox/public/field/image' +
|
|
|
|
|
'/actualites/2016/02/12/le-chat-source-de-bienfaits-pour-votre-sante.jpg'; // specifies the location of the image
|
|
|
|
|
|
|
|
|
|
img.onload = function() {
|
|
|
|
|
context.drawImage(img, imageLeft, imageTop); // draws the image at the specified x and y location
|
|
|
|
|
};
|
|
|
|
|
// Convert and download as image
|
|
|
|
|
var theCanvas = canvas;
|
|
|
|
|
document.body.appendChild(canvas);
|
|
|
|
|
|
|
|
|
|
// Convert and download as image
|
|
|
|
|
Canvas2Image.saveAsPNG(canvas);
|
|
|
|
|
$('#img-out').append(canvas);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
*/
|
|
|
|
|
/*
|
|
|
|
|
html2canvas(document.getElementsByClassName('subCard1'), {
|
|
|
|
|
// allowTaint:true,
|
|
|
|
|
logging:true,
|
|
|
|
|
onrendered: function(canvas) {
|
|
|
|
|
var img = new Image();
|
|
|
|
|
var testt : string;
|
|
|
|
|
img.setAttribute('crossOrigin', 'anonymous');
|
|
|
|
|
img = canvas.toDataURL('image/png');
|
|
|
|
|
testt = img.toString();
|
|
|
|
|
window.open(testt);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
*/
|
|
|
|
|
}
|
|
|
|
|
ngOnInit() {
|
|
|
|
|
}
|
|
|
|
|
ngOnDestroy() {}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|