Generate Captcha

by Chance Nursey-Bush

JavaScript

function svgUrlToPng(svgUrl, callback) {
    const svgImage = document.createElement('img');
    document.body.appendChild(svgImage);
    svgImage.onload = function () {
        const canvas = document.createElement('canvas');
        canvas.width = svgImage.clientWidth;
        canvas.height = svgImage.clientHeight;
        const canvasCtx = canvas.getContext('2d');
        canvasCtx.drawImage(svgImage, 0, 0);
        const imgData = canvas.toDataURL('image/png');
        callback(imgData);
    };
    svgImage.src = svgUrl;
 }
 
var svgToPngCb = function (imgData){
	 const pngImage = document.createElement('img');
    document.body.appendChild(pngImage);
    pngImage.src=imgData;
}

 function svgToPng(svg, callback) {
    var url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
    svgUrlToPng(url, function (imgData){
        callback(imgData);
        URL.revokeObjectURL(url);
    });
}

function generateCaptcha() {
   var result           = '';
   var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   var charactersLength = characters.length;
   for ( var i = 0; i < 6; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
}


const svg=`<svg version="1.1" baseProfile="full" width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
   <text x="150" y="125" font-size="60" text-anchor="middle" fill="black">`+generateCaptcha()+`</text>
   <rect width="300" height="200"
      fill="#808080" opacity="0.8" /></svg>` 
 svgToPng(svg, svgToPngCb);