Search code examples
javascriptjavasyncfusion

Does Syncfusion Document Editor support url as source of images?


I am struggling with syncfusion Document Editor. If I serialize an image and its content is in format base64 I am able to see the image in the document. However if the source of the image is its URL the Document Editor show an image indicating that it was unable to render the image or just doesn't find it. This is the code that I am using to transform from html to sfdt:

    public static String htmlToSfdt(String html) throws Exception {
        html = "<img src=\"http://localhost:8080/app/resources/rtf/1/test.001.png\"/>";
        byte[] bytes = html.getBytes(StandardCharsets.UTF_8);
        InputStream stream = new ByteArrayInputStream(bytes);       
        String sfdt = WordProcessorHelper.load(stream, com.syncfusion.ej2.wordprocessor.FormatType.Html);
        stream.close();
        return sfdt;
    }

Then I pass this sfdt to the DocumentEditor and get enter image description here


Solution

  • To solve the issue I did this

    public static String htmlToSfdt(String html) throws Exception {
            html = ImageUtil.convertImagesToBase64(html);
            byte[] bytes = html.getBytes(StandardCharsets.UTF_8);
            InputStream stream = new ByteArrayInputStream(bytes);       
            String sfdt = WordProcessorHelper.load(stream, com.syncfusion.ej2.wordprocessor.FormatType.Html);
            stream.close();
            return sfdt;
        }
    

    #ImageUtil.java

    public static String convertImagesToBase64(String html) {
            Pattern pattern = Pattern.compile("<img\\s+src\\s*=\\s*\"(.*?)\"", Pattern.CASE_INSENSITIVE);
            Matcher matcher = pattern.matcher(html);
            StringBuffer sb = new StringBuffer();
    
            while (matcher.find()) {
                String imageUrl = matcher.group(1);
                try {
                    String base64Image = imageToBase64(imageUrl);
                    matcher.appendReplacement(sb, "<img src=\"data:image/png;base64," + base64Image + "\"");
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
    
            matcher.appendTail(sb);
            return sb.toString();
        }
    
        public static String imageToBase64(String imageUrl) throws IOException {
              URL url = new URL(imageUrl);
              InputStream inputStream = url.openStream();
              ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
              byte[] buffer = new byte[4096];
              int bytesRead;
    
              while ((bytesRead = inputStream.read(buffer)) != -1) 
                  outputStream.write(buffer, 0, bytesRead);
    
              byte[] imageBytes = outputStream.toByteArray();
              String base64Image = Base64.getEncoder().encodeToString(imageBytes);
    
              inputStream.close();
              outputStream.close();
    
              return base64Image;
        }
    

    however, I would expect that Syncfusion's Document Editor do this backstage. If somebody knows a better way it would be helpful.