Picture (picture on canvas) upload summary

Recently in doing a picture upload some things, so far has been done relatively perfect, so the picture upload to do some summary.

My initial idea was to get a picture of HTML5 's label canvas and upload it to the server and preview it in time.

The picture on the canvas is divided into two situations:

1. Draw it up yourself. The code is as follows:

var C=document.getelementbyid ("MyCanvas"), Var cxt=c.getcontext ("2d"), Var grd=cxt.createlineargradient (0,0,175,50) ; Grd.addcolorstop (0, "#FF0000"); Grd.addcolorstop (1, "#00FF00"); Cxt.fillstyle=grd;cxt.fillrect (0,0,175,50);

2. Select a local picture to place on the canvas. Code into the following:

var C=document.getelementbyid ("MyCanvas"), Var cxt=c.getcontext ("2d"), Var img=new Image () img.src= "Flower.png" Cxt.drawimage (img,0,0);

However, it is easier to upload your own pictures on canvas, but in the 2nd case the SRC of the local IMG is not available (this is what the browser does not get for security reasons), so the IMG cannot be placed on the canvas.

So I use normal tags to save the selected local images, and <canvas> to save the pictures I have drawn.

HTML code snippet:

<td>

<!--This button is used to remove the default style of input type= ' file ', hide it, and then use Trigger () to trigger the input box's event--
<button id= "choosepicbtn" Disabled=true onclick= "trigger ()" > select Picture </button>
<input type= "File" hidden= "true" Name= "Picfile" id= "Filechoose" onchange= "Drawpiclogo ()" accept= "image/png,image/ Jpg,image/jpeg "/>
</td>

....

<!--This area is used to preview a picture, whether it's a picture you've drawn or a local selection--

<TD colspan=2 id= "Picarea" >
</td>

/*
* HJW File Selection event function
*/
Function trigger () {
$ ("#fileChoose"). Click ();
}

If I choose to draw a picture myself, then execute the following statement:

$ ("#picArea"). HTML ("<canvas id= ' Logocanvas ' width= ' + ' height= ' ></canvas>");
If you select an existing picture, execute the following statement:

$ ("#picArea"). HTML ("</img>");
and set the URL of the IMG, get the URL function of the picture as follows:

Get the URL of input[file] picture Important

   
   var file = Id (fileId);
   var agent = navigator.useragent;
   if (Agent.indexof ("MSIE") >=1) {
   
   
   
   } else if (Agent.indexof ("Chrome") >0) {
   
   
   

Start uploading: The first is the picture that you draw,

/*
* HJW
* Save objects on canvas as pictures and upload
* */
function Textlogoupload (logotitle,font,fontsize,txtcolor,backgroundcolor,showstate,isbkgcolor) {
Selected input source
var selectednode=ztree.getselectednodes () [0];
var id=selectednode.id;
Position information, x-coordinate and y-coordinate of the text table label
var xpos=$ ("#logo_x_value"). Val ();
var ypos=$ ("#logo_y_value"). Val ();
var Channel=selectednode.channel;
var Subchannel=selectednode.subchannel;
var canvas = document.getElementById ("Logocanvas");
var data=canvas.todataurl ();
The format of the Dataurl is "data:image/png;base64,****", the comma is preceded by some descriptive text, we only need the comma after the line
Data=data.split (",") [1];
var dataimg={
Picture data for file:data,//text table (BASE64 encoding)
Id:id,
Showstate:showstate,
Logotext:logotitle,
Font:font,
Fontsize:fontsize,
Txtcolor:txtcolor,
Backgroundcolor:backgroundcolor,
X:xpos,
Y:ypos,
Channel:channel,
Subchannel:subchannel,
Isbkgcolor:isbkgcolor
};
$.ajax ({
URL: '/darwin/service/imgupload/textlogo ',
Type: "POST",
Data:dataimg,
Success:function () {
}
});
}
Background

@RequestMapping (value= "Textlogo", method = Requestmethod.post)
public void  Textlogoupload (httpservletrequest request, httpservletresponse response) {

First, the BASE64 string passed by the foreground is decoded as a picture.
File File=decodebase64tofile (request.getparameter ("file"));
....................

}
Base64 decodes the following classes:

Package darwin.soc.videowallcontroller.web.imgUpload;

/**
* Created by Seven_hu on 2015/9/8.
*/
public class Base64code {
/**
* BASE64 encoding table.
*/
private static final char[] Base64code =
{' A ', ' B ', ' C ', ' D ', ' E ', ' F ', ' G ', ' H ', ' I ', ' J ', ' K ', ' L ', ' M ', ' N ', ' O ', ' P ', ' Q ', ' R ', ' S ', ' T ', ' U ', ' V ',
' W ', ' X ', ' Y ', ' Z ', ' A ', ' B ', ' C ', ' d ', ' e ', ' f ', ' g ', ' h ', ' I ', ' j ', ' K ', ' l ', ' m ', ' n ', ' o ', ' P ', ' Q ',
' R ', ' s ', ' t ', ' u ', ' V ', ' w ', ' x ', ' y ', ' z ', ' 0 ', ' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' + ', '/',};

/**
* Base64 decoding table.
*/
private static final byte[] Base64decode =
{-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 1,-1,-1,
-1,-1,-1,
-1,
-1,//Note two of 63, for compatible SMP,
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 62,-1, 63,
-1,
63,//"/" and "-" are translated into 63.
52, 53, 54, 55, 56, 57, 58, 59, 60, 61,-1,-1,-1, 0,-1,-1,-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,
12, 13,
14,//Note two of 0:
15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,-1,-1,-1,-1,
-1,//"A" and "=" are translated into 0.
-1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51,
-1,-1,-1,-1,-1,};

private static final int hex_255 = 0X0000FF;

private static final int hex_16515072 = 0xfc0000;

private static final int hex_258048 = 0x3f000;

private static final int hex_4032 = 0XFC0;

private static final int hex_63 = 0x3f;

private static final int hex_16711680 = 0xff0000;

private static final int hex_65280 = 0X00FF00;

private static final int number_two = 2;

private static final int number_three = 3;

private static final int number_four = 4;

private static final int number_six = 6;

private static final int number_eight = 8;

private static final int number_twelve = 12;

private static final int number_sixteen = 16;

private static final int number_eighteen = 18;

/**
* Construction method privatization to prevent instantiation.
*/
Private Base64code ()
{
}

/**
* BASE64 encoding. Encodes a byte array of 3 bytes into 4 visible characters.
*
* @param b
* Byte data that needs to be encoded.
* @return the encoded BASE64 string.
*/
public static String encode (byte[] b)
{
int code = 0;

Increase speed by opening up memory to actual coding length
StringBuffer sb = new StringBuffer (((b.length-1)/number_three) << Number_two + number_four);

to encode
for (int i = 0; i < b.length; i++)
{
Code |=
(B[i] << (number_sixteen-i% Number_three * number_eight))
& (hex_255 << (number_sixteen-i% Number_three * number_eight));
if (i% Number_three = = Number_two | | i = = b.length-1)
{
Sb.append (base64code[(Code & hex_16515072) >>> Number_eighteen]);
Sb.append (base64code[(Code & hex_258048) >>> number_twelve]);
Sb.append (base64code[(Code & hex_4032) >>> number_six]);
Sb.append (Base64code[code & hex_63]);
Code = 0;
}
}

For a byte array of length not 3 integer times, 0 before encoding, encoding after the end of the code = instead,
= The number of numbers is consistent with the length of the shortfall, to identify the actual length of the data
if (b.length% Number_three > 0)
{
Sb.setcharat (Sb.length ()-1, ' = ');
}
if (b.length% Number_three = = 1)
{
Sb.setcharat (Sb.length ()-number_two, ' = ');
}
return sb.tostring ();
}

/**
* Base64 decoding.
*
* @param code
* ASCII string encoded with Base64
* @return the decoded byte data
*/
public static byte[] Decode (String code)
{
Check parameter legitimacy
if (code = = NULL)
{
return null;
}
int len = Code.length ();
if (len% number_four! = 0)
{
throw new IllegalArgumentException ("Base64 string length must be 4*n");
}
if (code.length () = = 0)
{
return new byte[0];
}

Count the number of equal signs populated
int pad = 0;
if (Code.charat (len-1) = = ' = ')
{
pad++;
}
if (Code.charat (len-number_two) = = ' = ')
{
pad++;
}

Calculates the actual data length based on the number of padding equals
int Retlen = Len/number_four * NUMBER_THREE-PAD;

Allocating byte array space
byte[] ret = new Byte[retlen];

Check table decoding
Char Ch1, CH2, CH3, CH4;
int i;
for (i = 0; i < len; i + = Number_four)
{
Int j = I/number_four * Number_three;
CH1 = Code.charat (i);
CH2 = Code.charat (i + 1);
CH3 = Code.charat (i + number_two);
CH4 = Code.charat (i + number_three);
int TMP =
(Base64decode[ch1] << number_eighteen) | (Base64decode[ch2] << number_twelve)
| (Base64decode[ch3] << number_six) | (Base64decode[ch4]);
RET[J] = (byte) ((TMP & hex_16711680) >> number_sixteen);
if (I < len-number_four)
{
Ret[j + 1] = (byte) ((TMP & hex_65280) >> number_eight);
Ret[j + number_two] = (byte) ((TMP & hex_255));

}
Else
{
if (j + 1 < Retlen)
{
Ret[j + 1] = (byte) ((TMP & hex_65280) >> number_eight);
}
if (j + number_two < Retlen)
{
Ret[j + number_two] = (byte) ((TMP & hex_255));
}
}
}
return ret;
}
}

Then start to select the image upload:
Front desk

 function Piclogoupload (showstate,isbkgcolor) {
//Get the input source for the Set table header 
 Var selectednode=ztree.getselectednodes () [ 0]; 
 Var id=selectednode.id; 
 Var Channel=selectednode.channel; 
 Var Subchannel=selectednode.subchannel; 
 $.ajaxfileupload ({
 URL: '/darwin/service/imgupload/piclogo ',//server-side request address for file upload 
 Type:  ' Post ', 
 Data: {id:id, Channel:channel, Subchannel:subchannel, Showstate:showstate, Isbkgcolor:isbkgcolor }, 
 Secureuri:false,//general set to False 
 Fileelementid: ' Filechoose ',//File upload Space id attribute <input type= " File "
//id=" file "name=" file "/> 
 DataType: ' text ',//return value type generally set to JSON 
 Success:function (data, status)//Server Success Response handler 
 {
}, 
 error:function (dat      A, status, e)//server response failure handler 
 {
} 
}); 
 return false; 
} 
 Use the Ajaxfileupload.js plugin here, backstage: 

@RequestMapping (value = "Piclogo", method = Requestmethod.post)
public void  Piclogoupload (@RequestParam ("Picfile") multipartfile file,
                     HttpServletRequest request, HttpServletResponse response)
      Throws Exception {...}

Picture (picture on canvas) upload summary