Home > Developer > Web Develop
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Canvas</title> <Scripttype= "Text/javascript"src=".. /js/jquery.js "></Script> <styletype= "Text/css"> *{margin:0;padding:0;Outline:None;Border:None; }#canvas{margin:Auto Auto;width:7rem;margin:. 25rem 0 0 1.5rem;Border:1px solid Black; } </style></Head><Body> <CanvasID= "Canvas"width= "+"Height= "All"></Canvas> <imgID= "img"src="" /></Body></HTML><Scripttype= "Text/javascript"> /** * REM Layout initialization*/ $('HTML'). CSS ('font-size', $ (window). Width ()/( ten); /** Get canvas canvas * Get canvas drawing context*/ varCanvas= $('#canvas')[0]; varCXT=Canvas.getcontext ('2d'); /** * Image processing function drawImage, image conversion to base64 format Todataurl * drawImage (Graphic object, SX, SY, SW, SH, dx, dy, DW, DH) * S: Original graphics * D: New graphics * x: The beginning of the graph * Y: The beginning of the graph ordinate * W: the width of the graph * H: the height of the graph * Todataurl ("Picture format, default is Image/png") */ varimg= NewImage (); IMG.SRC= ".. /img/background_2.jpg"; Img.onload= function() {Cxt.drawimage (IMG,0, 0, Img.width, Img.height,0, 0, Canvas.width, canvas.height); varsrc=Canvas.todataurl ("Image/jpeg"); $('#img'). attr ('src', SRC); } </Script>
HTML5 Canvas (picture drawing converted to base64)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
