Jak wyświetlić obrazek nie mając urla +jQuery

Jak wyświetlić obrazek nie mając urla +jQuery
W0
  • Rejestracja:około 19 lat
  • Ostatnio:prawie 8 lat
0

Cześć,

Pobieram obrazek w następujący sposób:

Kopiuj
public AjaxResponse viewerShowImage(
			Locale locale,
			HttpServletResponse response)
	{
		InputStream fileContent = null;

		try {
			List<DmsDTO> dmsRequests = download(162062888L);

			DmsDTO result = dmsRequests.get(0);
			fileContent = result.getContent().getContent().getInputStream();
			
			long length = result.getLength();
			
			response.reset();
			
			response.setContentLength((int) length);
			response.setContentType(result.getContent().getContent().getContentType());
			response.setHeader("Cache-Control", "public");
			response.setHeader("Pragma", "public");
			response.setHeader("Expires", "20");
			
			try {
				FileCopyUtils.copy(fileContent, response.getOutputStream());
				response.getOutputStream().flush();
				response.getOutputStream().close();
			} catch (IOException e) {
				log.error("Blad wyswietlenia IO", e);
			}
			
			return AjaxResponse.success(response);
		} catch (Exception ioe) {
			log.error("Error FILE CONTENT", ioe);
			log.error("Error downloading files", ioe);
			throw new AexServiceException("Error downloading",
					ioe);
		}

	}

Ogólnie obrazek jest pobrany i przekazany do jspx, ale jak tam go wyświetlić za pomocą jQuery?

Kopiuj
function renderImage(imgUrl, canvasContainer) {
		var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        
		canvasContainer.appendChild(canvas);
        
        $.ajax({type: "POST", url: '${viewerShowImage}', 
        	headers: { 'Content-Type': 'image/jpeg;charset=UTF-8'},
        	async: true, data : {        		
        	 } ,
             success:function (message) {
            	 console.log("test: "+message);
            	 $("canvas").load(message);
             },
             error: function() {
            	 alert("error");
                    addMessage({ type: 'ERROR', messageText: 'Wystąpił błąd podczas wyświetlania obrazka.'});
                } 
         });
	}

Próbuję to jakoś połączyć. Jakbym miał url do obrazka to nie problem, a tak to nie wiem?

QO
  • Rejestracja:około 11 lat
  • Ostatnio:11 miesięcy
  • Postów:40
1

Po stronie serwera obrazek zapisujesz do stringa w Base64, a po stronie jQuery przypisujesz tego stringa do

Kopiuj
 <img src="data:image/jpg;base64,stringWBase64" />
edytowany 2x, ostatnio: QwertzOne
W0
  • Rejestracja:około 19 lat
  • Ostatnio:prawie 8 lat
0
QwertzOne napisał(a):

Po stronie serwera obrazek zapisujesz do stringa w Base64

Ok a jak to zrobić?

QwertzOne napisał(a):

a po stronie jQuery przypisujesz tego stringa do

Kopiuj
 <img src="data:image/jpg;base64,stringWBase64" />

Ale ja chcę wyświetlić w tagu <canvas> to czy takie coś zadziała:

Kopiuj
var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        
        canvasContainer.appendChild(canvas);
        img.src = "ścieżka do pliku"

Czy w miejce "ścieżka do pliku" powinienem wstawić "data:image/jpg;base64,stringWBase64"

QO
http://stackoverflow.com/questions/4409445/base64-png-data-to-html5-canvas . Nie używam Javy, ale masz strumień z którego pewnie bezpośrednio da się zamienić na Base64 lub np. najpierw zamienić na byte[] i docelowo na Base64, http://stackoverflow.com/questions/2418485/how-do-i-convert-a-byte-array-to-base64-in-java . We współczesnych przeglądarkach powinno działać.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.