This article describes the usage of the image interface between uploading and downloading of WeChat js-sdk. Share it for your reference, as follows:
The premise is already in (), and the image interface is verified.
The upload image interface (uploadImage) and download image interface (downloadImage) in WeChat js-sdk are both for the WeChat server itself. byOfficial DocumentationWhichever
Note:
1. Use the choiceImage interface to obtain the image address of the WeChat client and both are weixin://xxxx
2. Uploading pictures for 3 days. You can use the WeChat multimedia interface to download the pictures to your own server. The serverId obtained here is media_id. Reference document/wiki/12/
3. The current frequency limit for the multimedia file download interface is 10,000 times per day. If you need to increase the frequency, please email weixin-open@. The email subject is [Apply for multimedia interface call volume]. Please briefly describe your project, attach a product experience link, and explain the number of users and usage.
Example 1. Select a single image and upload it to the WeChat server
//Select a single picture({
count: 1, // Default 9 sizeType: ['original'],
sourceType: ['album', 'camera'],
success: function (res) {
var localId= [0];
$('#localId').text(localId);
//Select the image successfully and upload it to the WeChat server ({
localId: localId, // The local ID of the image to be uploaded is obtained from the choiceImage interface isShowProgressTips: 1, // Default is 1, display progress prompts success: function (res) {
var serverId = ; // Return the server ID of the picture $('#serverId').text(serverId);
}
});
}
});
Example 2. Download, just uploaded image, specify serverID
var serverId=$('#serverId').text();
({
serverId: serverId, // The server-side ID of the image to be downloaded is obtained from the uploadImage interface isShowProgressTips: 1, // Default is 1, display progress prompts success: function (res) {
var localId = ; // Return to the local ID after the image is downloaded $('#imgTarget').attr('src',localId);
}
});
Get user files from WeChat client, method 2,
You can use the File file field of html, read the client file, and then upload it to the server.
<div class="container"> <!--Image type verification method1--> <input type="file" multiple accept="image/*" /> <input type="button" value="Select Upload File" onclick="showFiles();" /> <h4>Select the file as follows:</h4> <img src="" /> </div>
Js code:
//Read the picture and upload it to the server instancevar fileBox = ('file');
function showFiles() {
//Get the array of selected files var fileList = ;
for (var i = 0; i < ; i++) {
var file = fileList[i];
//The second way to verify the image type if (/image\/\w+/.test())
readFile(file);
else
( + ': Not a picture');
}
}
//Read the image content as DataURLfunction readFile(file) {
var reader = new FileReader();
(file);
= function (e) {
var result = ;
$('#img1').attr('src', result)
upload(result);
}
//Upload to your own server function upload(dataUrl){
var data=(',')[1];
//The data result is converted to binary data data=(data);
var uint=new Uint8Array()
for (var i = 0; i < ; i++) {
uint[i]=(i);
}
var blob=new Blob([uint],{type:'image/jpeg'});
//Upload to server var fd=new FormData();
('file',blob);
('isclip', '-1');
('maxsize', 1024*1024*10);
('minsize', 0);
('subfolder', '1');
('automove',true);
('extention', '.jpg');
alert('Start upload');
var xhr = new XMLHttpRequest();
('post', '/common/upload', true);
// Listen to events = function (e) {
if ( == 4 && == 200) {
var data = eval('(' + + ')');
if ( == true) {
alert('Uploaded successfully:');
alert();
} else {
alert();
}
} else {
//alert();
}
}
(fd);
}
}
Read client image, Method 3, currently invalid, the code is for reference only
({
count: 1, // Default 9 sizeType: ['original'],
sourceType: ['album', 'camera'],
success: function (res) {
var localId= [0];
//Get the image object try {
var img=new Image();
//This setting is invalid in WeChat browser and will not throw an exception, and the subsequent code will not be executed ('crossOrigin', 'anonymous');
=function(){
var canvas=('canvasOne');
var ctx=('2d');
=;
=;
(0,0,,);
(img,0,0,,);
try {
upload(canvas);
} catch (e) {
alert();
alert();
}
}
=localId;
} catch (e) {
alert();
alert();
}
}
});
//Upload to your own serverfunction upload(canvas){
// Due to the browser security problem of toDataURL(), an exception will be thrown if the image in the same domain is not in the same domain //So here var data=('image/jpeg');
data=(',')[1];
alert();
}
For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of json operation skills in JavaScript》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.