question

MuhammadAfzal-1914 avatar image
0 Votes"
MuhammadAfzal-1914 asked MichaelHan-MSFT commented

on button click get image from SharePoint page and save it to SharePoint library

I want to get image content on SharePoint page and save it as image in images library. using only JSOM, REST and JavaScript. anyone has any idea? Thanks Aqo

office-sharepoint-online
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

MichaelHan-MSFT avatar image
0 Votes"
MichaelHan-MSFT answered MichaelHan-MSFT commented

Hi @MuhammadAfzal-1914,

To ge image content, you will need to create a canvas element with the correct dimensions and copy the image data with the drawImage function. Then you can use the toDataURL function to get a data: url that has the base-64 encoded image. You could refer to this article for more: https://stackoverflow.com/questions/934012/get-image-data-url-in-javascript

     function getBase64Image(img) {
         // Create an empty canvas element
         var canvas = document.createElement("canvas");
         canvas.width = img.width;
         canvas.height = img.height;

         // Copy the image contents to the canvas
         var ctx = canvas.getContext("2d");
         ctx.drawImage(img, 0, 0);

         // Get the data-URL formatted image
         // Firefox supports PNG and JPEG. You could check img.src to
         // guess the original format, but be aware the using "image/jpg"
         // will re-encode the image.
         var dataURL = canvas.toDataURL("image/png");

         return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
     }


After you get the image content , you could use jsom to create a file in the Images library.

     function createfile (){  
         var clientContext;  
         var oWebsite;  
         var oList;  
         var fileCreateInfo; 
            
         //get the image tag 
         var img=document.getElementById("myImage");
            
         var fileContent=getBase64Image(img);
        
         console.log(fileContent);

         clientContext = new SP.ClientContext.get_current();  
         oWebsite = clientContext.get_web();  
         oList = oWebsite.get_lists().getByTitle("Images"); 

         fileCreateInfo = new SP.FileCreationInformation();  
         fileCreateInfo.set_url("image.jpg");  
         fileCreateInfo.set_content(fileContent);    

         this.newFile = oList.get_rootFolder().get_files().add(fileCreateInfo);  
         clientContext.load(this.newFile);  
         clientContext.executeQueryAsync( Function.createDelegate(this, successHandler), Function.createDelegate(this, errorHandler));  

         function successHandler(){  
                console.log("FILE CREATED!");
         }  

         function errorHandler(){  
                console.log("File Creation Failed: " + arguments[1].get_message());  
         }  
     } 


On button click call the function:

96274-image.png



If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (39.1 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @MuhammadAfzal-1914,

Is there anything update? If my answer helps you, please click "Accept Answer" and upvote it.

0 Votes 0 ·