dom-to-image resize the blob

Question

This vue with dom-to-image the blob created before going the the method resizeBlob has high quality but the image is so big, after being pass to the method resizeBlob it makes the blob low quality. the reason i did not change the size at first its because it the only way to make it high quality image but its big image in dom-to-image.

Is there other way to resize the blob without changing the quality?

    async convertToImage() {
      const elm = document.getElementById('sample-id');
   
      let scale = 10;

      const styleProp = {
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
        width: elm.clientWidth + 'px',
        height: elm.clientHeight + 'px'
      };

      try {
        const dataUrl = await domtoimage.toPng(elm, {
          width: elm.clientWidth * scale,
          height: elm.clientHeight * scale,
          style: styleProp,
        });

        const fileOptions = {
          suggestedName: `test.png`,
          types: [
            {
              description: 'PNG Image',
              accept: {
                'image/png': ['.png'],
              },
            },
          ],
        };

        const fileHandle = await window.showSaveFilePicker(fileOptions);
        const writableStream = await fileHandle.createWritable();
        const blob = await fetch(dataUrl).then((response) => response.blob());
        const resizedBlob = await this.resizeBlob(blob, 450, 500);
     //low quality
        await writableStream.write(resizedBlob);
    // high quality but big image
   // await writableStream.write(blob);
        await writableStream.close();

      } catch (error) {
       
      }
    },

    async resizeBlob(blob, newWidth, newHeight) {
      return new Promise((resolve) => {
        const img = new Image();
        const blobUrl = URL.createObjectURL(blob);
        img.src = blobUrl;

        img.onload = () => {
          const canvas = document.createElement('canvas');
          canvas.width = newWidth;
          canvas.height = newHeight;
          const ctx = canvas.getContext('2d');


          ctx.imageSmoothingEnabled = true;
          ctx.imageSmoothingQuality = 'high';

          ctx.drawImage(img, 0, 0, newWidth, newHeight);

     
          canvas.toBlob((resizedBlob) => {
            resolve(resizedBlob);
            URL.revokeObjectURL(blobUrl); 
          });
        };
      });
    },