@ -28,7 +28,7 @@ import { Commercant } from '../../../../models/Commercant';
var $ = require ( 'jquery' ) ( window ) ;
} ) ; * /
// import { Image } from '../../../../models/Image';
// import { Image } from '../../../../models/Image';
@Component ( {
selector : 'app-op-commercial' ,
templateUrl : './op-commercial.component.html' ,
@ -93,370 +93,9 @@ export class OpCommercialComponent implements OnInit, OnDestroy {
goToDebiterCart ( idOp ) {
this . router . navigate ( [ '/debiterCarte' , idOp ] ) ;
}
goToCarteEnvoyer() {
this . router . navigate ( [ '/historiqueCarte' ] ) ;
}
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() { }
Tmadkaud
7 years ago